简单拖放

来源:互联网 发布:华为预装软件卸载 编辑:程序博客网 时间:2024/05/23 14:05
1.将待拖的元素的draggable属性设置为true。
2.触发待拖元素的ondragstart属性,即拖动开始时触发事件。
3.ev.dataTransfer.setData("type", data);设置拖动数据的类型和值。
4.ondragove事件规定被拖动数据能放置到何处。由于元素默认不能拖放进其他元素中,需要在ondragove事件中设置.preventDefault();阻止默认行为,使其可拖放。
5.当放开被拖数据时,会发生 drop 事件。
--事件中也需要preventDefault阻止浏览器默认行为(连接形式打开元素)。
--然后ev.dataTransfer.getData("type")获取setData的数据。(即被拖元素的id)
--最后将其append到被放元素中。

************************************************************
拖曳是H5特性,对于H4有原生JS方法,即通过鼠标事件,mousedown时获取坐标位置,mousemove时更新元素样式(坐标),mouseup时停止更新并清零参数即可。也有jq插件。

原创粉丝点击