HTML5新增了拖放的api ， 指的是抓取一个物体放置在一个容器中 。 注重：任何物体都可以被拖放

需要这些哦
HBUILD编纂器（小编小我常用的）
html文件
方式/
1起首我们搭建一个html框架 ， 元素至少需要有两个：
1.拖放的物体id
2.放置的容器id（可多个）

2其次是编写在拖放物体id的事务处置：
ondragstart事务：
ondragstart 属性挪用了一个 drag(event) 函数 ， 划定拖动什么数据 。
dataTransfer.setData() 方式设置被拖动数据的数据类型和值
【如何用html实现元素拖放】在这个例子中 ， 数据类型是text ， 值是它的id




3其次是编写放置容器id的事务处置：
1.ondragover事务：
这个事务划定数据能被拖放到何处的规模 ， 拖拽到规模内的时辰会呈现许可的手势 。 这个例子中绑定了allowDrop时候 ， 本家儿要使命在于阻止默认行为 ， 良多人不懂 ， 其实是必需的 ， 因为自己默认是阻止放置物体的 ， 所以要阻止默认行为




4续上：
2.ondrop时候：
当铺开拖放数据的时辰 ， 会触发这个事务 ， 我们绑定了一个函数drop ， 函数内需要执行：
阻止默认行为->getData获取数据类型->把被拖元素追加到容器内

5运行代码结果：










注重事项需要注重的是阻止默认行为是必需进行的 ， 否则是会掉效的
但愿可以帮忙大师理解拖拽 ， 更多常识会更新哦

以上内容就是如何用html实现元素拖放的内容啦 ， 希望对你有所帮助哦！

猜你喜欢

• 如何制作简单的h5小程序
• 如何使用微信翻译表白
• 如何添加企业微信管理员
• 今日头条如何申请自营广告
• 企业微信如何申请扩容增加人数
• 如何备份网易博客
• qq如何设置特别关心好友上线提醒
• 如何修改APP的定位
• 如何将qq收到的文件转发到微信
• 如何在手机QQ视频时开启或关闭自己的摄像头。