企业建网站一般要多少钱,仿win8网站,湖北微网站建设多少钱,专门做家具的网站拖放事件
dom被拖拽---经过一些dom---到达指定dom 被拖拽的dom#xff1a;#xff08;源对象#xff09; dragstart 源对象被拖拽 drag 源对象拖拽过程中 dragend 源对象拖拽结束#xff08;drop事件后执行#xff09; 拖拽过程中经过的dom#xff1a;#xf…拖放事件
dom被拖拽---经过一些dom---到达指定dom 被拖拽的dom源对象 dragstart 源对象被拖拽 drag 源对象拖拽过程中 dragend 源对象拖拽结束drop事件后执行 拖拽过程中经过的dom过程对象 dragenter 源对象进入过程对象 dragover 源对象在过程对象中移动 (设置event.preventDefault(),否则drop事件不会执行) drageleave 源对象离开过程对象 拖拽到达指定的dom目标对象 drop 拖放到指定目标对象内 dataTransfer对象拖拽过程中数据传递对象 setData()存入数据 支持格式text/plain、text/html、text/xml、text/url-listgetData() clearData()
实现
实现目录可在同级、子级拖动
思路
在dragstart时向dataTransfer对象存入源对象的数据在dragenter时给过程对象加同级拖拽标识 在dragenter时同时记录下进入时鼠标的坐标x1, y1 当dragover时依然记录下鼠标的坐标x2, y2 设定规则加子级拖拽标识例如:Math.abs(x2-x1) 50 当dragleave时去掉所有标识当drop时获取dataTransfer对象的数据并更新拖拽数据当dragend时去掉所有标识
效果
拖拽到子级 2.拖拽到同级 此例子是结合vue递归组件实现vue-drag
更多专业前端知识请上
【猿2048】www.mk2048.com
