输入框和div拖动

来源：互联网发布：js json 添加元素编辑：程序博客网时间：2024/05/21 17:55

要求：页面有输入框、有一个文本，一个按钮；在输入框中输入文字后，点击按钮在div中追加显示

输入框中的文字，并清空输入框。（留言板）。div能够拖动。

注意：事件和哪个节点绑定。以及添加事件和移除事件的对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="textId" />
<input type="button" id="buttonId" value="执行" />
<div id="divId" style="width: 300px;height: 300px;border: 1px red solid; position: absolute;">

</div>

</body>

<script type="text/javascript">
var text = document.getElementById("textId");
var btn = document.getElementById("buto");
var div = document.getElementById("divId");

var textCont = "";
btn.onclick= function(){
textCont = text.value +textCont;
div.innerText = textCont;
text.value = "";
}

div.addEventListener("mousedown",fun ,false);
function fun(){
document.onmousemove = function(event){
div.style.top = event.clientY+"px";
div.style.left = event.clientX+"px";
console.log(event.clientX +" "+ event.clientY);
}
}
document.onmouseup = function (){
document.onmousemove = null;
}

</script>
</html>

2 0