拖拽的原生和jQuery写法

原生写法

var dragged;/* 可拖动的目标元素会触发事件 */document.addEventListener("drag", function( event ) {}, false);document.addEventListener("dragstart", function( event ) {// 保存拖动元素的引用(ref.)dragged = event.target;// 使其半透明event.target.style.opacity = .5;}, false);document.addEventListener("dragend", function( event ) {// 重置透明度event.target.style.opacity = "";}, false);/* 放下目标节点时触发事件 */document.addEventListener("dragover", function( event ) {// 阻止默认动作event.preventDefault();}, false);document.addEventListener("dragenter", function( event ) {// 当可拖动的元素进入可放置的目标高亮目标节点if ( event.target.className == "dropzone" ) {event.target.style.background = "purple";}}, false);document.addEventListener("dragleave", function( event ) {// 当拖动元素离开可放置目标节点，重置其背景if ( event.target.className == "dropzone" ) {event.target.style.background = "";}}, false);document.addEventListener("drop", function( event ) {// 阻止默认动作（如打开一些元素的链接）event.preventDefault();// 移动拖动的元素到所选择的放置目标节点if ( event.target.className == "dropzone" ) {event.target.style.background = "";dragged.parentNode.removeChild( dragged );event.target.appendChild( dragged );}}, false);
复制代码

jQuery写法

    //拖放开始:获取id放入dataTransfer$(".divide-pep").on("dragstart",function(e){e.originalEvent.dataTransfer.setData("obj_add",e.target.id);console.log(e.originalEvent.dataTransform)});//允许放入$(".divide-droppable,.option-area").on("dragover",function(e){e.originalEvent.preventDefault();})//放下事件$(".divide-droppable").on("drop",function(e){e.originalEvent.preventDefault;var id = e.originalEvent.dataTransfer.getData("obj_add");$(this).append($("#"+id));})$(".option-area").on("drop",function(e){e.originalEvent.preventDefault;var id = e.originalEvent.dataTransfer.getData("obj_add");$(this).append($("#"+id));})
复制代码

originalEvent是什么？

个人理解originalEvent是jQuery封装的，用于获取原生event事件的；

栗子

$('#aaa').on("touchstart", touchStart);function touchStart(event){console.log(event);
}
//这样可读到，event.originalEvent.touches[0]
复制代码

//用原生的，这样可读到，event.touches[0]
document.getElementById('aaa').addEventListener("touchstart", touchStart, false);function touchStart(event){console.log(event.touches[0]);
}
复制代码

dataTransfer是什么？

在进行拖放操作时，DataTransfer对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型。

方法

addElement()

设置拖动源。通常你不需要改变这项，如果修改这项将会影响拖动的哪个节点和dragend事件的触发。默认目标是被拖动的节点。 obj.addElement();

clearData()

删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定，将删除所有类型相关联的数据。如果不存在指定类型的数据，或数据传输不包含任何数据，此方法将没有任何效果。 obj.clearData(type);

getData()

根据指定的类型检索数据，如果指定类型的数据不存在或者该 DataTransfer 对象中没有数据，方法将返回一个空字符串。 obj.getData(type);

setData()

为一个给定的类型设置数据。如果该数据类型不存在，它将添加到的末尾，这样类型列表中的最后一个项目将是新的格式。如果已经存在的数据类型，替换相同的位置的现有数据。就是，当更换相同类型的数据时，不会更改类型列表的顺序。 obj.setData(type,data);

之前用jq写过拖拽总结的文，当时应该是参考别人的文章写的，如侵权请告知~