HMTL5+js 拖动备份

Posted 2020-07-17

　　html增加了拖动事件，这个吸引人的事件该怎么用呢，今天做个整理，以备以后查阅，且分享与到家，欢迎批评指正。

               

　　以上是关于拖放事件的说明。

以下实现一个最简单的例子。

1.建立两个容器（div）,添加ondragover事件，个人理解是拖动经过时触发的事件，监听方法（ ev.preventDefault()）很简单，就是允许放置拖放进来的元素（默认是不允许的）;

2.为这两个容器添加ondrop，个人理解是当拖动到一个地方，放开鼠标触发的事件，监听方法是为这个容器添加拖动进来的元素，那添加的元素怎么获得呢，就需要拖动对象传递的参数中获得，拖动对象怎么传递参数，请看第4步，（

ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));

）

3.设置元素可以拖动属性为true,即draggable = ‘true‘

4.为需要拖动的对象添加监听ondragstart，个人理解就是当拖动开始的时候触发的事件，此事件的监听方法是传递本身的参数

ev.dataTransfer.setData("Text", ev.target.id);