js drag & drop实现拖拽

JavaScript010

js drag & drop实现拖拽,第1张

1.先在元素上添加属性 <div draggable="true"></div>,定义了这个属性后就可以注册拖动的事件了

2.拖动事件:

开始拖动时dragstart

进行拖动时drag

结束拖动时dragend

3.拖拽区域触发事件:

拖拽元素进入区域时触发dragenter

拖拽元素进入区域后悬停触发dragover

拖拽元素离开区域时触发dragleave

拖拽元素放置时触发drop

这个很简单啊。

事件处理函数参数(e)里面可以获取你的元素(target),根据你元素的标记来判断就可以了。

比如你元素指定了class,就你判断你的元素知否是这个class如果是,则继续操作,否则return。

如:当你选中网页里部分内容,就像拖动文件夹一样拖动时,

ondrag将触发,放开时,触发ondrop

这两个事件都为HTML5 里新加的事件,所以请到现行兼容HTML5的浏览器测试