首页 > 代码库 > 拖放相关事件
拖放相关事件
一、拖放事件
1.任何元素都有一个draggable属性,draggable=true就能拖动,拖动元素时依次触发下列事件:
(1)dragstart:按下鼠标并移动时,在被拖动元素上触发;
(2)drag:在元素被拖动时持续触发;
(3)dragend:拖动停止时触发;
2.当元素被拖动到一个有效的放置目标时,依次触发下列事件:
(1)dragenter:元素被拖动到放置目标上触发;
(2)dragover:被拖动元素在放置目标范围内移动时触发;
(3)drop:元素被放到放置目标中触发;
二、自定义放置目标
当把元素拖动到无效的放置目标时,不会触发drop事件。我们可以把任何元素变成有效的放置目标:
div.ondragenter=function(event){ if (event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } } div.ondragover=function(event){ if (event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } } //取消元素默认放置行为 div.ondrop=function(event){ if (event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } }
三、dataTransfer对象
dataTransfer对象是事件对象的属性,有两个主要方法:setData()、getData(),用法如下:
event.dataTransfer.setData("Text",event.target.id); var data=http://www.mamicode.com/event.dataTransfer.getData("Text");
拖放相关事件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。