要点内容: JS元素拖拽
开发日期:2019-12-09
一、拖拽
可拖拽属性:draggable = “true”;
默认可拖拽元素:
兼容性:Chrome safair 正常使用, Firefox 部分版本可用
二、拖拽的生命周期
- 拖拽开始 ondragstart
- 拖拽进行中 ondrag
- 拖拽结束 ondragend
三、拖拽的组成
1.被拖拽的物体
ondragstart ondrag ondragend
2. 目标区域
ondragenter ondragover ondragleave ondrop
四、元素拖拽(被拖拽的物体)
(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("拖拽结束");
}
五、目标元素事件(目标区域)
(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)
*/
}
六、拖拽 dataTransfer
(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 ~~~~~~~~~~~~~~~~~~~