最基础的前端就是HTML+CSS+Javascript。掌握这三项技术算是入门,但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂(HTML/CSS/JS),本着提高技术水平,夯实基础知识的中心思想,开课(每周四)。事实上,我之前写过一篇关于拖放的文章。今天就来说说吧。拖拽实现有两种形式:拖拽API模拟实现,M端性能实现,拖拽实现方案PC端性能模拟实现。按下鼠标时,记录按下的DOM。(必要时会查询parent)当鼠标移动时,根据鼠标位置修改DOM的位置。(如果要求原位置不变,可以克隆一个新的)当鼠标抬起时,判断parent不同,然后移入。(必要时会查询parent,如果是同级别的tag,可以排序,追加当前代码)测试地址实现代码vardrapDOM=null;window.addEventListener('mousedown',function(e){if(e.target.classList.contains('drap')){drapDOM=e.target;}})window.addEventListener('mousemove',function(e){if(drapDOM){drapDOM.style.position='fixed';drapDOM.style.pointerEvents='none';drapDOM.style.left=e.clientX+'px'drapDOM.style.top=e.clientY+'px'console.log(e)}})window.addEventListener('mouseup',function(e){console.log(e.target)if(drapDOM){drapDOM.style.position='initial';drapDOM.style.pointerEvents='initial';drapDOM.style.left='0'drapDOM.style.top='0';if(drapDOM.parentNode!=e.target){e.target.appendChild(drapDOM)}drapDOM=null}})注释drapDOM.style.pointerEvents='none'防止复制干扰e.target可拖放的DOMDOMdragAPI实现先说说好处可以在复制式动作循环中自动生成事件,可以轻松区分(目标对象和源对象)继续agstart:源对象开始被拖动ondrag:源对象正在被拖动ondragend:源对象被拖到最后拖离目标对象ondrop:源对象在目标对象上方拖放数据传输:源对象数据保存:e.data.Transfer.setData(k,v)//k-v必须都是string类型目标对象获取数据:e.data.Transfer.getData(k,v)实现方案测试地址draggable点添加属性(draggable="true")可拖动点添加监听功能dragstart记录当前拖动点place点添加监听功能drop、dragover防止默认事件,防止(打开,不能拖动)放置点添加监听功能drop判断拖动点是否为不在放置点内(if(!$(ev.target).find(dragged).length){)附加实现代码vardragged;functionallowDrop(ev){//console.log('allowDrop',ev)ev.preventDefault();}functiondrag(ev){//console.log('drag',ev)}functiondrop(ev){console.log('drop',ev)ev.preventDefault();if(!$(ev.target).find(dragged).length){$(ev.target).append(dragged)}}functiondragstart(ev){dragged=ev.target;}$(function(){$('ul').off().on('drop',drop).on('dragover',allowDrop)$('li[draggable="true"]').off().on('拖动',drag).on('dragstart',dragstart)})注意事项放置点添加监听函数drop,dragover防止默认事件,prevent(open,notdraggable)draggable="true"用于表示这是一个可拖动的点。M端和PC端的表现其实是不一样的。比如拖动M会触发滚动其他解决方案&开源框架jquery-uisortable.js微信公众号:前端linong
