为了让元素可拖动,需要使用 HTML5 draggable 属性。
链接和图片默认是可拖动的,不需要 draggable 属性
在拖放的过程中会触发以下事件:
- 在拖动目标上触发事件 (源元素):
- ondragstart - 用户开始拖动元素时触发
- ondrag - 元素正在拖动时触发
- ondragend - 用户完成元素拖动后触发
- 释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
将span拖放到div中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function() {
EventUtil.addHandler(document, "dragstart", function(event) {
event = EventUtil.getEvent(event);
//dataTransfer.setData()方法设置数据类型和拖动的数据
event.dataTransfer.setData("Text", event.target.id);
});
/ 默认情况下,数据/元素不能在其他元素中被拖放。
对于drop我们必须防止元素的默认处理
EventUtil.addHandler(document, "dragover", function(event) {
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
});
/*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
利用dataTransfer.getData()方法获得拖放数据
拖拖的数据元素id
拖拽元素附加到drop元素*/
EventUtil.addHandler(document, "drop", function(event) {
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
target = EventUtil.getTarget(event);
if (event.target.className == "droptarget") {
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
// alert("ss");
});
}
var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
// 解决浏览器兼容性问题
getEvent: function(event) {
return event ? event : window.event;
},
// 返回事件目标
getTarget: function(event) {
return event.target || event.srcElement;
},
//取消事件的默认行为。
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 移除事件处理程序
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
//提供相关元素的信息,relatedTarget这个属性只对与mouseover和mouseout事件才包含值。
getRelatedTarget: function(event) {
if (event.relatedTarget) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else {
return null;
}
},
//获取鼠标按钮
/**
* 0: 表示没有按下按钮。
1: 表示按下了主鼠标按钮。
2: 表示按下了次鼠标按钮。
3: 表示同时按下了主、次鼠标按钮
4: 表示按下了中间的鼠标按钮。
5: 表示同时按下了主鼠标按钮和中间的鼠标按钮。
6: 表示同时按下了次鼠标按钮和中间的鼠标按钮。
7: 表示同时按下了三个鼠标按钮。*/
getButton: function(event) {
if (document.implementation.hasFeature("MouseEvents", "2.0")) {
return event.button;
} else {
switch (event.button) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
//获得鼠标滚轮的增量值delta
getWheelDelta: function(event) {
if (event.wheelDelta) {
return (client.engine.opera && client.engine.opera < 9.5 ?
-event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
}
},
//获取字符串编码 主要用于文本框 监听事件是keypress
getCharCode: function(event) {
if (typeof event.charCode == "number") {
return event.charCode;
} else {
return event.keyCode;
}
},
//取消进一步的事件捕获或者冒泡
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
</script>
<style>
</style>
</head>
<body>
<a href="https://www.baidu.com" id="dragtarget">百度一下</a>
<br>
<br>
<span draggable="true" id="dragtarget1">阿清呀</span>
<br>
<br>
<div style="width:100px;height:100px;background-color: #bfa;" class="droptarget"></div>
</body>
</html>
愿你的坚持终有收获。