让你的网页动起来 - 轻松实现 JavaScript 拖拽功能

效果展示

实现

要实现该效果需要运用 HTML5 的 dragstart 拖放操作事件

通过去开启dragstart监听拖放操作事件就能实现图片的拖动

<div class="empty">
      <div class="fill" draggable="true"></div>
</div>

本例子中我们对fill盒子开启了draggable事件，fill盒子是用来存照片的

但是这样并不能形成一个反馈，只有单纯的拖动效果，效果如下图所示

如果想要实现在拖动了图片后有一个反馈效果，我们就需要使用JavaScript去监听draggable的开始拖动和结束拖动事件

.hold {
        border: 5px solid #00ff00;
      }

const fill = document.querySelector(".fill");
      // 拖拽开始事件
      fill.addEventListener("dragstart", DragStart);
      function DragStart(e) {
   
        this.classList.add("hold");
      }
      // 拖拽结束事件
      fill.addEventListener("dragend", DragEnd);
      function DragEnd(e) {
   
        this.classList.remove("hold");
      }

通过在拖动时给他添加边框，结束时取消以实现一个反馈的效果

最后去监听empty盒子的即可根据不同事件触发时，实现不同的效果

const empty = document.querySelectorAll(".empty");
      empty.forEach((item) => {
   
        // 经过事件
        item.addEventListener("dragover", DragOver);
        // 进入事件
        item.addEventListener("dragenter", DragEnter);
        // 离开事件
        item.addEventListener("dragleave"