メインコンテンツ：JS要素のドラッグアンドドロップ
開発日：2019-12-09
1.ドラッグ
Draggable属性：draggable = "true";
デフォルトのdraggable要素： 互換性：Chrome safairが通常使用され、Firefoxの一部のバージョンが利用可能![]()
第二に、抗力のライフサイクル
- ドラッグスタートondragstart
- ドラッグをドラッグ
- ドラッグオンエンドラジェンド
3、ドラッグの構成
1.ドラッグされているオブジェクト
ondragstart ondrag ondragend
2.ターゲット領域
ondragenter ondragover ondragleave ondrop
4番目に、要素のドラッグ（ドラッグされるオブジェクト）
（1）エフェクト表示
（2）実装方法
ele.ondragstart = function(e){
beginX = e.offsetX;
beginY = e.offsetY;
console.log(e);
}
//在拖拽的过程中就会触发
ele.ondrag = function(e){
console.log(1);
}
ele.ondragend = function(e){
ele.style.top = e.clientY-beginX + "px";
ele.style.left = e.clientX-beginY + "px";
console.log("拖拽结束");
}
V.ターゲット要素イベント（ターゲットエリア）
（1）エフェクト表示
（2）実装方法
var target = document.getElementsByClassName("target")[0];
//被拖拽物体已经入目标区域
//只有在鼠标进入时才会触发
target.ondragenter = function(e){
console.log("被拖拽物体已经入目标区域")
}
target.ondragover = function(e){
/**
* 阻止默认事件, ondragleave 与 ondrop => 链模式
* ondragleave 与 ondrop 是冲突的，想要ondrop 触发，
* 则必须在ondragleave 之前禁用，即在ondragover 中设置阻止默认行为。
* 对于ondrop防止浏览器的默认处理数据，调用preventDefault()，
* ondrop事件的默认行为是链模式；
*/
e.preventDefault()
console.log("拖拽的元素在目标元素中持续触发");
}
target.ondragleave = function(e){
console.log("被拖拽的元素离开目标区域才会触发")
}
target.ondrop = function(){
console.log("拖拽元素在目标区域内松开鼠标时触发");
/* ondrop 这个行为触发两个事件
ondragend（拖拽的元素回到原处）
ondragleave（被拖拽的元素离开目标区域）
链模式 over-- a(drop) --b(dragend)/c(leave)
*/
}
6、dataTransferをドラッグアンドドロップ
（1）エフェクト表示1：ClearData（）が現在設定されているデータをクリアするように設定されていない
エフェクト表示：ClearData（）が現在設定されているデータをクリアするように設定されている
（2）実装方法
初始化一个DataTransfer对象，用于保存拖拽数据和交互信息的媒介.
1.DataTransfer对象调用方式：event.DataTransfer.
2.dropEffect : 拖拽交互类型 copy,move,link,none
3.setData(format,data) : 设置数据 以键值对的形式存储数据 (text, "文本数据");
4.getData(format) 获取数据
/* 实例 */
<div id="d1"><img src="imgs/clothes04.jpg" width="218" id="myimg"/></div> // 拖拽元素
<div id="d2"></div> // 目标区域
<script>
var ele1 = document.getElementById("myimg");
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
ele1.ondragstart = function(e){
var mysrc = ele1.src;
e.dataTransfer.setData("src",mysrc); // setData() 设置数据
}
d2.ondragover = function(e){
e.preventDefault(); // preventDefault() 阻止默认行为
}
d2.ondrop = function(e){
var mysrc = e.dataTransfer.getData("src"); // getData() 获取数据
var myimg = document.createElement("img");
myimg.src = mysrc;
myimg.width = "218";
d2.appendChild(myimg);
/* clearData() 清除当前设置的数据
* e.dataTransfer.clearData("src");
* d1.removeChild(ele1)
*/
}
</script>
~~~~~~~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~~~~
