首页 > 编程 > HTML > 正文

HTML5 拖放

2020-03-24 17:16:22
字体:
来源:转载
供稿:网友
var data = ev.dataTransfer.getData( text ev.target.appendChild(document.getElementById(data)); /script /head body div id= div1 ondrop= drop(event) ondragover= allowDrop(event) /div img id= drag1 src= img_logo.gif draggable= true ondragstart= drag(event) width= 336 height= 69 /body /html

亲自试一试

它也许看上去有点复杂,不过让我们研究一下拖放事件的所有不同部分。


默认地,数据/元素无法被放置到其他元素中。为了实现拖放,我们必须阻止元素的这种默认的处理方式。

这个任务由 ondragover 事件的 event.preventDefault() 方法完成:

event.preventDefault()

var data = ev.dataTransfer.getData( text ev.target.appendChild(document.getElementById(data));代码解释:
调用 preventDefault() 来阻止数据的浏览器默认处理方式(drop 事件的默认行为是以链接形式打开)通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据被拖数据是被拖元素的 id ( drag1 )把被拖元素追加到放置元素中

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

上一篇:HTML 5 Web 存储

下一篇:HTML 5 拖放

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表