前端原生拖拽（drag & drop）的一点小总结

最新推荐文章于 2024-09-12 11:51:40 发布

小智大愚

最新推荐文章于 2024-09-12 11:51:40 发布

阅读量2.6k

点赞数 1

分类专栏： web 前端问题收集文章标签：前端 jquery html5

本文链接：https://blog.csdn.net/sandy_zhi/article/details/121922229

版权

web 前端同时被 2 个专栏收录

90 篇文章 1 订阅

订阅专栏

问题收集

9 篇文章 0 订阅

订阅专栏

新工作中，第一个手生的功能，遇到了很多诡异的问题，今天终于解惑了。最终原因还是对代码没有透彻的了解，jquery的运用也不熟练导致的。稍稍的记录一下。

原始功能

对项目列表中的元素进行拖拽，拖拽到一定的位置，根据放置位置做一些相应的处理（具体不分析）。实际使用时根据自己需求作相应处理就可以了。

官方参考及常用API

HTML 拖放 API - Web API 接口参考 | MDN

项目中用到的事件方法

dragstart : 开始拖拽一个元素，被拖拽元素监听事件

dragover：当被拖拽元素在目标地元素时触发所以目标元素监听组织默认事件

drop：被拖拽元素释放时监听目标元素监听

属性

draggable 允许元素被拖拽因此被拖拽元素需要设置 draggable = true

数据传递和自定义图标

DataTransfer：对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据。

方法：setData() getData() setDragImage()

问题及总结

① jquery 对象转 Element ：出现这个问题完全是对jquery 的不熟悉，因为基本没怎么用过。

② 为什么会有①中的问题呢因为在自定义拖拽跟随图标时调用 setDragImage() 语法如下：

setDragImage(img, xOffset, yOffset) img 是 img | element ，按照官方说法就是可以是Image 、canvas ,也可以是Element元素，而我使用时一直使用的jquery 在查找对象，一直报不是ELement的错误，而我并没有 ①中的概念.

③ 设置了对应了Element 但是效果一直不好，因为对代码整体没熟透，感觉写的没问题，即使只设置了想要跟随的元素拖拽，效果依然不理想。没办法我自己写了个demo 代码如下：

因为真的不知道是哪里的原因就胡乱怀疑试了原生方法试jquery方法，最终发现都没有问题，可以实现。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drag demo </title>
  <style>
   .container{
     width: 100%;
     display: flex;
   }
   .source{
      width: 200px;
      height: 200px;
      border: 1px red solid;
      display: flex;
    }
    input{
      width: 25px;
      height: 25px;
      margin-top: 30px;
    }
    .source img{
      width: 45px;
      height: 45px;
    }
    .target{
      width: 300px;
      border: 1px green solid;
      margin-left: 50px;
    }
  </style>
  <script src="./jquery/jquery.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="source" draggable="true">
      <input type="checkbox"/>
      <h3>
        <img src="./img/img1.png" alt="">
        <span>标题标题4</span>
      </h3>
    </div>
    <div class="target"></div>
  </div>
  <script>
    // var source = document.querySelector('.source')
    // var dragImgEle = document.querySelector('h3')
    // source.ondragstart = function(e){
    //   console.log('dragStart','ondragstart')
    //   console.log('dragStart',e.target)
    //   e.dataTransfer.setDragImage(dragImgEle, 10, 10);
    // }
    $('.source').on('dragstart',function(e){
      var dragImgEle2 = $(e.target).find('h3')
      var dragImgEle3 = document.querySelector(dragImgEle2.selector)
      e.originalEvent.dataTransfer.setDragImage(dragImgEle2[0], 10, 10);

    })
    var target  = document.querySelector('.target');
    target.ondrop = function(e){
      console.log("e",'ondrop')
    }

  </script>
</body>
</html>

自己试了demo 才发现，写的方法都没有问题，最终最终最终是代码中的布局导致了拖拽图像的效果。写的demo 效果如下图：左侧是原元素，右侧是拖动的图像。正常来说原生拖拽是自动生成了拖拽元素的，但我的项目中无论怎么样怎么设置拖拽元素都包含左边的checkbox input 。简直到了怀疑人生。问题原因：float+padding-left 组合。 原生拖拽图像默认是拖拽的元素，但好像不是取得元素，而是元素区域的图片画像，像如下的图片checkbox 虽然不是拖拽元素，但是如果它浮动在拖拽元素的上面然后拖拽的图像就有了他！！！