html5的拖拽是一个比较常见的功能,目前jQuery封装的拖拽插件也比较多,这里我用原声js写一个简单的拖拽demo,主要是便于了解拖拽的原理。希望对初学者有所帮助。
- html5拖拽属性:draggable
让div可拖放:<div draggable='true'>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#container{width:800px;height:94px;display:flex;margin:0 auto;justify-content:space-between;border:2px solid red;}
#delete{width:800px;height:94px;display:flex;justify-content:space-between;margin:50px auto 0;border:2px solid green;}
</style>
</head>
<body>
<div id="container">
<img src="1.png" id="img1">
<img src="2.png" id="img2">
<img src="3.png" id="img3">
<img src="4.png" id="img4">
</div>
<div id="delete">
</div>
</body>
<script>
/**
* 在拖动目标上触发事件 (源元素):
* ondragstart - 用户开始拖动元素时触发
* ondrag - 元素正在拖动时触发(鼠标可能在移动也可能未移动)
* ondragend - 用户完成元素拖动后触发(用户触发拖拽,释放时没有拖拽到目标元素,会触发此事件)
*释放目标时触发的事件:
* ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
* ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
* ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
* ondrop - 在一个拖动过程中,释放鼠标键时触发此事件(需要在这个事件里面完成dom的创建)
*浏览器支持:
* Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。
*如何在拖动的源对象事件和目标对象事件间传递数据:
* 1、 HTML5为所有的拖动相关事件提供了一个新的属性dataTransfer :
* e.dataTransfer { } //数据传递对象
* 功能:用于在源对象和目标对象的事件间传递数据
* 2、源对象上的事件处理中保存数据:
* e.dataTransfer.setData( key, value ); //key,value必须都是string类型
* 3. 目标对象上的事件处理中读取数据:
* var v = e.dataTransfer.getData( key );
* */
function $(id){return document.getElementById(id);}
$("container").ondragstart=function (e){
var evt=e||window.event;
var src=e.srcElement||evt.target;
evt.dataTransfer.setData("Text",src.id)
}
// 注意:虽然所有元素都支持拖动事件,但这些元素默认是不允许放置的,所以需要阻止事件冒泡和默认事件
$("delete").ondragover=function(e){
e.stopPropagation();
e.preventDefault();
}
$("delete").ondrop=function(e){
var evt=e||window.event;
var src=e.srcElement||e.target;
var data=evt.dataTransfer.getData("Text");
$("delete").appendChild(document.getElementById(data));
}
</script>
</html>