通付盾 网站建设公司,广州网站建设技术外包,个人备案的网站销售商品,上海柘中建设股份有限公司网站最近碰到了个需求#xff0c;大概就是要通过可视化拖拽的方式配置一个冰柜#xff0c;需要把预设好的冰柜内部架子模板一个个拖到冰箱内。一开始的想法是用鼠标事件#xff08;mousedown、mouseup等#xff09;那一套去实现#xff0c;能实现但是过程过于复杂#xff0c;… 最近碰到了个需求大概就是要通过可视化拖拽的方式配置一个冰柜需要把预设好的冰柜内部架子模板一个个拖到冰箱内。一开始的想法是用鼠标事件mousedown、mouseup等那一套去实现能实现但是过程过于复杂需要控制的状态太多了。其实 Web Api 为 html 元素拖拽量身定制了一套 HTML 拖放API用这个方法实现一些简单的拖拽功能简直不要太简单。为此写了这篇文章下面将详细介绍 HTML 拖放 API 的核心知识点 一、被拖拽元素和放置被拖拽元素的元素 通常我们所了解的拖放是按住鼠标左键不放然后移动鼠标把一个页面元素从某个位置移动到另一个位置然后松开鼠标左键至此完成了整个拖放过程。在这个过程中我们需要先重点关注两个东西一个是被拖拽元素另一个是 放置被拖拽元素的元素。 1.1 被拖拽元素 我们得先有个概念页面上显示的元素默认并不都是可以被拖拽的除了图片、被选中的文字、链接所以如果当前元素默认不可被拖拽那么就得先把它设置为可拖拽的。ps可拖拽元素被拖拽时会有一个半透明的快照跟着鼠标移动。 将 HTML 元素的 draggable 属性设置为 true, 元素就可以变为可拖拽元素。效果如下图。 div idbox draggabletruedraggable box/div1.2 可放置被拖拽元素的元素 所有的元素区域默认是不支持放置被拖拽元素的直观的表现是当被拖拽元素经过不可放置区域时鼠标的样式是一个禁止放置的一个图标圆圈带一个斜杠所以需要将目标元素设置为一个可放置区域 默认情况下是这样 div idbox draggabletruedraggable box/div div iddroppable放置区域/div设置为放置区域需要给元素绑定一个事件 dragover 且要 阻止默认行为 div idbox draggabletruedraggable box/div div iddroppable放置区域/div scriptlet dropDom document.getElementById(droppable)dropDom.addEventListener(dragover, (e) {e.preventDefault()}) /scriptReact: 放置区域需要绑定onDragOver事件且要 阻止默认行为 – 其他事件一样加on div draggabletruedraggable box/div div onDragOver{(e) {e.preventDefault()}}放置区域/div设置为可放置区域后鼠标样式也变了不再是禁止图标,而是一个加号图标图标可以设置下面会讲解 然而你会发现被拖放元素并没有真正的被放置到放置区域这是必然的放置操作需要开发者自行定义以上的设置只是是为了向用户表明这个区域是允许放东西的那么至于怎么放需要开发者自行决定。 二、拖拽过程触发的一些事件 这一小节将带你了解整个拖放过程的其他细节比如拖拽过程中会触发哪些事件 2.1 被拖放目标触发的事件 给被拖放目标元素绑定三个事件 dragstart、drag、dragend。 div idbox draggabletruedraggable box/div div iddroppable放置区域/div scriptlet dragDom document.getElementById(box)dragDom.addEventListener(dragstart, (e) {console.log(开始拖动);})dragDom.addEventListener(drag, (e) {console.log(拖动中);})dragDom.addEventListener(dragend, (e) {console.log(结束拖动);}) /script React div draggabletrueonDragStart{(e) {console.log(开始拖动, e);}}onDrag{(e) {console.log(拖动中, e);}}onDragEnd{(e) {console.log(结束拖动, e);}}draggable box/div div onDragOver{(e) {e.preventDefault()}}放置区域/div 开始拖动触发 dragstart 拖动过程中鼠标不松开触发drag松开鼠标或者按下 Esc 键触发 dragend。 2.2 被拖拽元素在放置区域内会触发的事件 先给放置目标元素绑定四个事件 div idbox draggabletruedraggable box/div div iddroppable放置区域/div scriptlet dropDom document.getElementById(droppable)dropDom.addEventListener(dragenter, (e) {console.log(进入到了放置区域~);})dropDom.addEventListener(dragover, (e) {e.preventDefault()console.log(在放置区域内拖拽中~);})dropDom.addEventListener(dragleave, (e) {console.log(离开了放置区域~);})dropDom.addEventListener(drop, (e) {console.log(在放置区域内放下了被拖拽元素~)}) /script拖拽元素进入放置区域内时触发 dragenter 事件在放置区域内移动被拖放鼠标不松开元素触发 dragover 事件被拖放元素离开放置区域触发 dragleave 事件在放置区域内松开鼠标触发 drop 事件。 三、实现真正意义上的元素拖放 通过上面触发的事件我们可以知道用户真正在放置区域释放鼠标的时候只有 drop 事件能够监听到。所以开发者需要在这个事件里做真正的放置操作放置什么由开发者决定可以是被拖拽元素也可以是自定义的一些内容。 放置被拖拽元素 div idbox draggabletruedraggable box/div div iddroppable放置区域/div scriptlet dropDom document.getElementById(droppable)dropDom.addEventListener(dragover, (e) {e.preventDefault()console.log(在放置区域内拖拽中~);})dropDom.addEventListener(drop, (e) {console.log(在放置区域内放下了被拖拽元素~)e.target.appendChild(document.getElementById(box))}) /script放置自定义内容 dropDom.addEventListener(drop, (e) {console.log(在放置区域内放下了被拖拽元素~)let customCOntent p自定义内容/pe.target.innerHTML e.target.innerHTML customCOntent })四、dataTransfer 对象 4.1 从被拖放元素向可放置元素传递数据 dataTransfer 对象提供了一个setData()方法它接受两个参数第一个参数是传递数据的类型(一般是标准的MIME类型)第二个数据是数据值。dataTransfer 还提供了 getData() 的方法用于获取传递的数据它接受一个参数参数值为 setData 对应的第一个参数。 传递一个简单的字符串数据 div idbox draggabletruedraggable box/div div iddroppable放置区域/div scriptlet dropDom document.getElementById(droppable)let dragDom document.getElementById(box)dragDom.addEventListener(dragstart, (e) {e.dataTransfer.setData(text/plain, 自定义数据)})dropDom.addEventListener(dragover, (e) {e.preventDefault()})dropDom.addEventListener(drop, (e) {let data e.dataTransfer.getData(text/plain)console.log(你传递的数据为, data);}) /script⚡注意只能在 dragstart 事件中设置数据在其他地方设置无效。且只能在 drop 事件中获取设置的数据其他事件中获取不到。 案例根据传递的数据放置不同的内容。 div idbox draggabletruedraggable box/div div iddroppable放置区域/div scriptlet dropDom document.getElementById(droppable)let dragDom document.getElementById(box)dropDom.addEventListener(dragover, (e) {e.preventDefault()})dropDom.addEventListener(drop, (e) {let num e.dataTransfer.getData(num)console.log(num);if(num 5)e.target.innerHTML e.target.innerHTML p传递的数字大于5/pelse if(num 5) e.target.innerHTML e.target.innerHTML p传递的数字等于5/pelsee.target.innerHTML e.target.innerHTML p传递的数字小于5/p})dragDom.addEventListener(dragstart, (e) {let num Math.floor(Math.random() * 10) 1;e.dataTransfer.setData(num, num)}) /script4.2 自定义拖拽过程中跟随鼠标移动的内容 默认情况下元素被拖拽时会有一个半透明的元素快照跟随着鼠标移动。通过 dataTransfer 提供的 setDragImage(elemnt, xOffset, yOffset) 方法是可以自定义跟随内容。接受三个参数 elemnt 可以是 dom 节点或者一个图片对象xOffset, yOffset 是相对于鼠标的偏移量。 设置为一个图片 scriptlet dragDom document.getElementById(box)dragDom.addEventListener(dragstart, (e) {let img new Image()img.src ./ikunlogo.pnge.dataTransfer.setDragImage(img, 10, 10)}) /script4.3 设置放置前的反馈图标 dataTransfer 提供了一个 dropEffect属性设置放置前的反馈图标它有四种取值 none move copy link 在 dragover 中设置 dropEffect 的值 dropDom.addEventListener(dragover, (e) {e.preventDefault()e.dataTransfer.dropEffect link // none || move || copy || link })值为 none 或者经过不可放置区域显示禁止放置图标值为 move 时 值为 copy 时 值为 link 时 4.4 拖动文件上传 通过 dataTransfer 的 files 属性可以获取用户拖拽的文件信息 拖拽系统文件到放置区域并打印拖拽的文件信息 dropDom.addEventListener(drop, (e) {e.preventDefault()// 上传的文件列表let fileList e.dataTransfer.filesfor (let i 0; i fileList.length; i) {const file fileList[i];console.log(文件名 file.name);console.log(文件大小 file.size);// 后续操作 比如调接口上传文件} })4.5 清除 setData() 的值 dataTransfer 提供了 clearData() 清除 setData 设置的值传参数则删除指定类型的值不传则全部清除。 dropDom.addEventListener(drop, (e) {console.log(e.dataTransfer.getData(text/plain));console.log(e.dataTransfer.getData(text/html)); })dragDom.addEventListener(dragstart, (e) {e.dataTransfer.setData(text/plain, 自定义数据)e.dataTransfer.setData(text/html, 自定义数据2)e.dataTransfer.clearData(text/html) })4.6 查看设置了哪些类型的值 dataTransfer 提供了 types 属性查看 setData 设置了哪些类型的值。 dropDom.addEventListener(drop, (e) {console.log(e.dataTransfer.types); }) dragDom.addEventListener(dragstart, (e) {e.dataTransfer.setData(text/plain, 自定义数据)e.dataTransfer.setData(text/html, 自定义数据2) })4.7 effectAllowed 属性取值会影响到 dropEffect 的取值效果。 effectAllowed 用于限制 dropEffect 只能设置哪些值 effectAllowed 的取值有 none - 此项表示 dropEffect 设置任何值都是禁止效果 copy - dropEffect 可以设置为 copy copyLink - dropEffect 可以设置为 copy 和 link copyMove - dropEffect 可以设置为 copy 和 Move link - dropEffect 可以设置为 link linkMove - dropEffect 可以设置为 link 和 Move move - dropEffect 可以设置为 Move all - dropEffect 可以设置为所有合法值 uninitialized - 等同 all 效果 dropDom.addEventListener(dragover, (e) {e.preventDefault()e.dataTransfer.dropEffect move }) dragDom.addEventListener(dragstart, (e) {e.dataTransfer.effectAllowed none })上面即使 dropEffect 设置为 move 但是 effectAllowed 的值为 none所有还是禁止放置的反馈图标。 五、总结 实现一个拖拽功能时先定义好被拖拽元素和放置区域元素。所有的放置操作都是在 drop 事件中完成。放置前的反馈效果可以根据你传递的数据来设置 dropEffect 显示不同的效果。被拖拽元素也可以是放置区域放置区域也可以是被拖拽元素两者没有明确的界限。功能自定义按需求开发