输入框和div拖动

最新推荐文章于 2022-07-08 20:32:20 发布

sdfujichao

最新推荐文章于 2022-07-08 20:32:20 发布

阅读量726

点赞数 2

分类专栏： javascript 文章标签： JS事件监听 JS函数封装前端 javascript

本文链接：https://blog.csdn.net/sdfujichao/article/details/51284202

版权

javascript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

要求：页面有输入框、有一个文本，一个按钮；在输入框中输入文字后，点击按钮在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.οnclick= 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>