原生JS快速实现拖拽效果

代替作为被拖元素。CSS在实现样式时，除了实现静态样式外，一些过渡状态还需要添加样式来提升视觉体验：1、在元素被拖动时添加边框等效果；2.当元素被拖动到容器上方时，容器也应该被样式化以表明容器可以接受被拖动的元素。css:body{background-color:darksalmon;}.draggable{background-image:url('http://source.unsplash.com/random/150x150');位置：相对；高度：150px；宽度：150px；顶部：5px；左：5px；光标：指针；}.droppable{显示：内联块；高度：160px；宽度：160px；边距：10px；边框：3px三文鱼实心；:4pxyellowsolid;}.drag-over{background-color:#f4f4f4;border-style:dashed;}.invisible{display:none;}注意事项：1.图片来自https://source.unsplash.com/的随机图片；2、.dragging是draggable元素被拖拽的状态，并加了黄色边框；3..drag-over是当可拖动元素被拖动到容器上方时容器的状态，并添加了一个灰色的虚线边框。JS最后，我们需要通过js监听draggable和droppable相关的事件。js：//查询draggable和droppableconstdraggable=document.querySelector('.draggable');constdroppables=document.querySelectorAll('.droppable');//监听draggable的相关事件draggable.addEventListener('dragstart',dragStart);draggable.addEventListener('dragend',dragEnd);functiondragStart(){this.className+='dragging';setTimeout(()=>{this.className='invisible';},0);}functiondragEnd(){this.className='draggable';}//监听droppable的相关事件for(constdroppableofdroppables){droppable.addEventListener('dragover',dragOver);droppable.addEventListener('dragleave',dragLeave);droppable.addEventListener('dragenter',dragEnter);droppable.addEventListener('drop',dragDrop);}functiondragOver(e){e.preventDefault();}functiondragEnter(e){e.preventDefault();this.className+='drag-over';}functiondragLeave(e){this.className='droppable';}functiondragDrop(e){this.className='droppable';this.append(draggable);}注意事项：1。当德拉加当ble元素被拖动时，原来容器中的draggable元素不会消失，我们需要手动隐藏它（class设置为invisible），如果同步操作会立即触发dragend事件导致拖动效果消失，所以在setTimeout的回调中异步设置，可以保证拖动操作开始后，可拖动元素隐藏；2、在dragEnter和dragOver方法中，我们需要通过preventDefault取消事件，表示容器是合法的可放置元素，否则不会触发容器的drop事件，那么接下来的操作也不起作用。详细解释请参考MDNDropTarget；3.在dragDrop方法中，直接使用append方法将可拖动元素移动到当前容器中。demo比较简单，但是细节还是有的。自己实践一下，才能更深入地理解。完整示例：https://codepen.io/mudontire/…