拖拽属性
拖拽属性
H5的新特性 : 是指鼠标点击源对象之后,不松手将其拖拽到目标对象,或半途松手(释放)的过程
拖拽 Drag
源对象: 指定的鼠标点击的一个事物,例如: 一个元素,一个图片等
目标对象: 指定是我们拖动源对象后,预计要进入的区域
- 被拖动的源对象可以触发的方法
- ondragstart: 源对象开始被拖动
- ondrag: 被拖动过程中
- ondragend: 源对象被拖动结束
- 源对象进入目标对象可以触发的事件
- ondragenter: 源对象进入目标对象时触发
- ondragover: 源对象悬停在目标对象上方时触发
- ondragleave: 源对象被拖动着离开目标对象时触发
- ondrop: 源对象在目标对象上松手时 触发
- 拖拽属性 一共就是这7个方法
功能: 用于在源对象和目标对象之间传递数据
- setData( ): 设置数据 参数是 key 和 value(value必须是字符串)
- getData( ): 获取数据,参数是key 。 通过key去获取对应的value值
- dataTransfer 注意:
dataTransfer的传输数据必须为字符串类型,所以需要转化数据类型,那么就要使用到JSON方法
// 使用JSON对象中的方法 转换 字符串和对象的数据类型
var str = new String();
var obj = {};
// JSON.stringify(对象):可以将对象类型 转换为字符串类型
console.log(typeof JSON.stringify(obj));
//JSON.parse(字符串):可以将字符串类型 转换为对象类型
console.log(typeof JSON.parse(str));
注意
标签中自带的属性: draggable 是否可以拖拽,默认值 false
// 例:
// 切记开启draggable属性
<div class="box" draggable="true"></div>
<script type="text/javascript">
var box = document.getElementsByClassName("box")[0];
// 定义全局变量,存储鼠标的位置
var offsetX;
var offsetY;
// 开始拖动时
box.ondragstart = function(ev){
// 获取鼠标在元素上的位置
offsetX = ev.offsetX;
offsetY = ev.offsetY;
}
// 源对象被拖动时
box.ondrag = function(ev){
var x = ev.clientX;
var y = ev.clientY;
// drag事件最后一刻,无法读取鼠标的坐标, x 和 y 都会变成0
if (x == 0 || y == 0) {
return false; // 直接结束,不赋值给元素
}
x -= offsetX;
y -= offsetY;
this.style.left = x + "px";
this.style.top = y + "px";
}
// 拖动结束时
box.ondragend = function(){
console.log(1)
}
</script>