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