吉首市建设局官方网站,网站建设类的手机软件,成都学校网站建,wordpress增加模板拖拽#xff08;这两个字看了几遍已经不认识了#xff09;
说到拖拽#xff0c;应用场景不可谓不多。无论是打开电脑还是手机#xff0c;第一眼望去的界面都是可拖拽的#xff0c;靠拖拽实现APP或者应用的重新布局#xff0c;或者拖拽文件进行操作文件。
先看效果图这两个字看了几遍已经不认识了
说到拖拽应用场景不可谓不多。无论是打开电脑还是手机第一眼望去的界面都是可拖拽的靠拖拽实现APP或者应用的重新布局或者拖拽文件进行操作文件。
先看效果图如何实现一个如图HTML元素的拖拽并排序 HTML中的拖拽事件drag drop
参考MDN中文文档
事件类型
drag 当拖拽的元素或者选中的文本时触发* dragend 当拖拽元素结束时触发* dragenter 当拖拽元素或选中的文本到一个可释放目标时触发* dragleave 当拖拽元素或选中的文本离开一个可释放目标时触发* dragover 当元素或选中的文本被拖到一个可释放目标上时触发每 100 毫秒触发一次* dragstart 当用户开始拖拽一个元素或选中的文本时触发* drop 当元素或选中的文本在可释放目标上被释放时触发Coding 写一段简单的CSS和html 实现初始的页面
css*{margin: 0;padding: 0;box-sizing: border-box;}ul{margin: 200px auto;width: 200px;list-style-type: none;}li{margin: 5px;text-align: center;width: 200px;height: 30px;background: skyblue;}.list .moving{background: transparent;color: transparent;border: 1px dashed #ccc;} htmlul classlistli 1/lili 2/lili 3/lili 4/lili 5/li/ul 此时我们的页面如下图 现在还不可以进行拖拽操作为了可以实现拖拽操作我们必须给每个元素设置 draggable“true” ul classlistli draggabletrue1/lili draggabletrue2/lili draggabletrue3/lili draggabletrue4/lili draggabletrue5/li/ul 元素已经可以基础的拖拽 接下来我们需要在JS中对DOM元素进行一系列操作来实现对应的效果
1.实现拖出去的元素原位置样式变为透明虚线 2.实现拖动到其他元素上时列表顺序发生改变 let list document.querySelector(.list)let currentLi// 记录拖拽元素 我们用事件委托监听 “dragstart” 事件给拖动的元素添加类名修改样式这里会出现奇怪的一幕就是拖动的样式和原来的样式同时变成了透明。 list.addEventListener(dragstart,(e){e.dataTransfer.effectAllowed move // 拖动样式改为 movecurrentLi e.targetcurrentLi.classList.add(moving)}) 这里会出现奇怪的一幕就是拖动的样式和原来的样式同时变成了透明。这是因为跟随鼠标拖动的元素的样式在拖动的那一刻是原始元素的样式所以也会添加moving 那么在这里我们加一个异步 list.addEventListener(dragstart,(e){e.dataTransfer.effectAllowed movecurrentLi e.targetsetTimeout((){currentLi.classList.add(moving)})}) 到这里距离目标又更近了一步
接下来我们需要在拖动的过程中对列表的元素进行重新的排序
Node.insertBefore()方法在参考节点之前插入一个拥有指定父节点的子节点 list.addEventListener(dragenter,(e){e.preventDefault()// 阻止默认事件if(e.target currentLi||e.target list){ // 当移动到当前拖动元素或者父元素上面我们不做操作return}let liArray Array.from(list.childNodes)let currentIndex liArray.indexOf(currentLi) // 获取到拖动元素的下标let targetindex liArray.indexOf(e.target) // 获取到目标元素的下标if(currentIndextargetindex){list.insertBefore(currentLi,e.target.nextElementSibling)}else{list.insertBefore(currentLi,e.target)}}) 最后我们需要在拖拽结束将元素的moving类名移除,以及阻止拖拽到一个目标上的默认事件否则会出现禁止 list.addEventListener(dragover,(e){e.preventDefault()})list.addEventListener(dragend,(e){currentLi.classList.remove(moving)}) 至此一个简单的拖拽排序功能就实现了 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle *{margin: 0;padding: 0;box-sizing: border-box;}ul{margin: 200px auto;width: 200px;list-style-type: none;}li{margin: 5px;text-align: center;width: 200px;height: 30px;background: skyblue;}.list .moving{background: transparent;color: transparent;border: 1px dashed #ccc;} /style
/head
bodyul classlistli draggabletrue1/lili draggabletrue2/lili draggabletrue3/lili draggabletrue4/lili draggabletrue5/li/ulscript let list document.querySelector(.list)let currentLilist.addEventListener(dragstart,(e){e.dataTransfer.effectAllowed movecurrentLi e.targetsetTimeout((){currentLi.classList.add(moving)})})list.addEventListener(dragenter,(e){e.preventDefault()if(e.target currentLi||e.target list){return}let liArray Array.from(list.childNodes)let currentIndex liArray.indexOf(currentLi)let targetindex liArray.indexOf(e.target)if(currentIndextargetindex){ list.insertBefore(currentLi,e.target.nextElementSibling)}else{list.insertBefore(currentLi,e.target)}})list.addEventListener(dragover,(e){e.preventDefault()})list.addEventListener(dragend,(e){currentLi.classList.remove(moving)}) /script
/body
/html 最后
最近还整理一份JavaScript与ES的笔记一共25个重要的知识点对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识提升工作效率。 有需要的小伙伴可以点击下方卡片领取无偿分享
