雪飘落在对面的屋顶上，屋顶像蒙了一条闪着银光的纱巾，美丽极了。雪飘落在树上，树上像缀满了银色的小花。雪飘落在操场上，操场变得像铺满棉花一样白茫茫的一片。
今天接到一个小小的需求，就是利用 JS 来实现鼠标拖动一个div，来实现其位置的改变。虽然说要求看着很简单，但实现起来还是比较难一点的，下面就说说实现的方法！
js实现鼠标拖动div改变其位置的方法
先上个图示，大家看一下效果！
js实现鼠标拖动的div的代码
html完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color:aliceblue;
margin-right: 10px;
}
</style>
</head>
<body>
<div draggable="true" style="background-color: #E91E63;">div1</div>
<div draggable="true" style="background-color: green;">div2</div>
<div draggable="true" style="background-color: #ccc;">div3</div>
<script>
div = document.getElementsByClassName('ws');
container = null;
for(let i=0;i<div.length;i++){
div[i].ondragstart = function(){
container = this;
}
div[i].ondragover = function(){
event.preventDefault();
}
div[i].ondrop = function(){
if(container != null && container != this){
temp = document.createElement('div');
document.body.replaceChild(temp,this);
document.body.replaceChild(this, container);
document.body.replaceChild(container, temp);
}
}
}
</script>
</body>
</html>注意要点：
1、被移动元素的 draggable 属性一直要设置为 true
2、移动到的位置，一定要有一个指定的范围，不然会报错
3、上面的示例采用的是元素替换的方法
DIV draggable 属性小解
draggable：属性规定元素是否可拖动。
语法：
<p draggable="true">这是一个可拖动的段落。</p>
注：拖动div元素的效果，需要配合js来实现！
本文javascript如何实现鼠标拖动div改变其位置的好代码教程到此结束。如果要给完美人生一个定义，那就是惬意。如果要给惬意一个定义，那就是三五知己谈笑风生。小编再次感谢大家对我们的支持！
![]("text.jpg)