Drag Drop API

一、步骤:

a.定义可拖动目标

b.定义被拖动的数据,可能为多种不不同格式

c.允许设置拖拽效果

d.定义放置区域

e.在drop发生的时候做些事情

二、dataTransfer():用来保存被拖动的数据

setData():设置数据

getData():获取数据

三、拖放事件

①dragstart拖拽开始

注意:元素默认都是可以被拖拽的设置属性draggable=“true”

如果设置为false,则无法进行拖拽

②dragend拖拽结束

③dragenter拖拽时,鼠标进入

通常在这里添加效果

④dragover拖拽时,鼠标略过,重复执行

设置目标元素允许接受拖放元素

e.preventDefault();或return false

⑤dragleave拖拽时,鼠标离开,通常在这里移除效果

⑥drop拖放的时候放下(如果要触发drop事件,则必须清理掉标签的dragover事件。因为dragover事件只要被触发,就会拦截drop事件,直接执行dragend事件)

示例:jquery实现标签拖拽

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.处理步骤 a.定义可拖动目标 b.定义被拖动的数据,可能为多种不同的格式 c.允许设置拖拽效果 d.定义放置区...
    阿迪呀dity阅读 1,649评论 0 3
  • 在h4标准中,我们定义个拖拽事件是很麻烦的,用原生的js来实现拖拽的效果。我们需要计算拖拽的元素的坐标位置和距离之...
    风清扬101阅读 1,391评论 0 0
  • html5出现了很多比较好的应用,今天我们来讲讲关于元素拖动的。 前言 关于拖动,我们应该理解什么是拖动源和放置目...
    侬姝沁儿阅读 1,291评论 0 5
  • windows系统如何在命令行下编译并运行一个cpp程序? 首先,需要一个编译器,gcc。Windows下可以安装...
    瞬身止水阅读 1,159评论 0 0
  • 一学期一度的日语会话考试又要来啦~我的内心是这样的(⇀ㅁ↼‶) 这样的 (✘﹏✘ა) 和 ୧( ⁼̴̶̤̀ω⁼...
    晴天的余阅读 401评论 5 2