企业网站建设原则有哪些,动态背景设置网站,本地生活网站 源码,WordPress 嵌入flash拖拽事件主要包括以下几种#xff1a; dragstart#xff08;拖拽开始#xff09;#xff1a;当用户开始拖拽一个元素时触发#xff0c;通常在被拖拽的元素上绑定此事件。在该事件的处理函数中#xff0c;可以设置被拖拽元素的一些属性或数据。 drag#xff08;拖拽移动… 拖拽事件主要包括以下几种 dragstart拖拽开始当用户开始拖拽一个元素时触发通常在被拖拽的元素上绑定此事件。在该事件的处理函数中可以设置被拖拽元素的一些属性或数据。 drag拖拽移动在拖拽过程中随着鼠标或触摸屏的移动持续触发通常在被拖拽元素上绑定此事件。在该事件的处理函数中可以根据鼠标或触摸屏的位置更新被拖拽元素的状态。 dragenter进入拖拽目标区域当一个可拖拽的元素进入一个拖拽目标区域时触发通常在拖拽目标元素上绑定此事件。在该事件的处理函数中可以为拖拽目标元素添加一些视觉效果以提示用户可以释放拖拽元素。 dragover在拖拽目标区域中移动当一个可拖拽的元素在一个拖拽目标区域中移动时持续触发通常在拖拽目标元素上绑定此事件。在该事件的处理函数中一般需要阻止默认的事件行为以允许拖拽元素释放到该区域。 dragleave离开拖拽目标区域当一个可拖拽的元素离开一个拖拽目标区域时触发通常在拖拽目标元素上绑定此事件。在该事件的处理函数中可以移除之前添加的视觉效果。 drop释放拖拽元素当用户释放鼠标或触摸屏时在拖拽目标区域内触发此事件。通常在拖拽目标元素上绑定此事件。在该事件的处理函数中可以处理释放拖拽元素后的相关操作如更新页面内容或重新排列元素顺序。 这些事件可以结合使用以实现各种拖拽交互功能例如拖拽排序、拖拽放置等。 1、演示 2、问题 1、怎样让元素变得可拖拽 给元素加上 draggable 属性值为 true 即可 div draggabletrue classlist-item1/div2、拖拽的时候本身元素的样式得变 准备样式 .list-item.moving {background-color: transparent;color: transparent;border: 1px solid #ccc;} 3、什么时候产生排序 拖拽的时候把拖拽对象放到了某些元素之上这里就要监听拖拽进入事件 el.addEventListener(dragenter, function (e) {}) 3、 源码及注释
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.list-item {background-color: #266fff;border-radius: 5px;color: #fff;width: 250px;padding: 5px;margin-bottom: 10px;}.list-item.moving {background-color: transparent;color: transparent;border: 1px solid #ccc;}/style/headbodydiv classlistdiv draggabletrue classlist-item1/divdiv draggabletrue classlist-item2/divdiv draggabletrue classlist-item3/divdiv draggabletrue classlist-item4/divdiv draggabletrue classlist-item5/div/div/bodyscript// 拖拽排序在很多站点里面是非常常见的使用的API就是一个拖拽API// 1、让元素变的可拖拽 找到这些元素给这些元素加上 draggable 属性值为true这样就变得可拖拽了// 2、拖拽的时候样式得变 class为moving的样式const list document.querySelector(.list)// 用事件委托的方式 给父元素绑定事件list.addEventListener(dragstart, function (e) {// 当拖拽开始的时候要找到拖拽的那个元素给他添加类样式// 为什么要用setTimeout,不用的话拖拽的那个元素也会变成虚线就是添加了类样式后的样子// 它的样式取决于拖拽开始时候元素本身的样式需要在拖拽开始的时候保持原来的样式 把它变成异步的setTimeout(() {e.target.classList.add(moving)}, 0)sourceNode e.target})// 用来记录当前拖拽的是哪个元素let sourceNode null// 3、什么时候产生排序拖拽的时候把拖拽对象放到了某些元素之上这里就要监听拖拽进入事件list.addEventListener(dragenter, function (e) {e.preventDefault()// 排除掉一些情况比如拖拽的时候进入了父元素 或者 是本身自己if (e.target list || e.target sourceNode) returnconst children [...list.children]// 通过所处元素的下标来判断是上方还是下方const sourceIndex children.indexOf(sourceNode)const targetIndex children.indexOf(e.target)console.log(sourceIndex, targetIndex)// 4、当拖拽的元素进入到别的元素身上的时候要做的一些事情if (sourceIndex targetIndex) {// console.log(下方)// 插入到那个元素下一个元素之前list.insertBefore(sourceNode, e.target.nextElementSibling)} else {// console.log(上方)list.insertBefore(sourceNode, e.target)}console.log(sourceIndex)})// 拖拽完毕 松开鼠标list.addEventListener(dragend, function (e) {// 移除掉类样式即可sourceNode.classList.remove(moving)})/script
/html
