html中鼠标移动位置,js实现鼠标拖动div改变其位置的教程

今天接到一个小小的需求，就是利用 JS 来实现鼠标拖动一个div，来实现其位置的改变。虽然说要求看着很简单，但实现起来还是比较难一点的，下面就说说实现的方法！

js实现鼠标拖动div改变其位置的方法

先上个图示，大家看一下效果！

js实现鼠标拖动的div的代码

html完整代码html>

Document

div{

width: 100px;

height: 100px;

text-align: center;

line-height: 100px;

color:aliceblue;

margin-right: 10px;

}

div1

div2

div3

div = document.getElementsByClassName('ws');

container = null;

for(let i=0;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);

}

}

}

注意要点：

1、被移动元素的 draggable 属性一直要设置为 true

2、移动到的位置，一定要有一个指定的范围，不然会报错

3、上面的示例采用的是元素替换的方法

DIV draggable 属性小解

draggable：属性规定元素是否可拖动。

语法：

这是一个可拖动的段落。

注：拖动div元素的效果，需要配合js来实现！