新工作中，第一个手生的功能，遇到了很多诡异的问题，今天终于解惑了。最终原因还是对代码没有透彻的了解，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 虽然不是拖拽元素，但是如果它浮动在拖拽元素的上面 然后拖拽的图像就有了他！！！

 以上这个问题，就是另外纠结到怀疑人生的问题，奇奇怪怪，找到原因了也是简单无比。

# 前端 # jquery # html5
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区