html5——拖拽 / 拖拽排序 - html5

简单demo：

div拖动排序

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
var srcdiv = null;
function drag(ev, divdom) {
srcdiv = divdom;
ev.dataTransfer.setData("text/html", divdom.innerHTML);
}
function drop(ev, divdom) {
ev.preventDefault();
if(srcdiv != divdom) {
srcdiv.innerHTML = divdom.innerHTML;
divdom.innerHTML = ev.dataTransfer.getData("text/html");
}
}
</script>
</head>
<body>
<div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
div1!
</div>
<div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
div2!
</div>
<div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
div3
</div>
</body>
</html>

上面函数介绍：

ondrop: 当放置被拖数据时，会发生 drop 事件，这里自定义

drop(event,this)函数,互换两个的innerHTML

ondragover:当拖动链接等有默认事件的元素时，要在ondragover事件中用ev.preventDefault()阻止默认事件。否则drop事件不会触发。

draggable:允许拖动。

ondragstart:规定当元素被拖动时，会发生什么。在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值。

运行demo：

<!DOCTYPE HTML> <html>  	<head>  		<script type="text/javascript"> 			function allowDrop(ev) { 				ev.preventDefault(); 			}  			var srcdiv = null;  			function drag(ev, divdom) { 				srcdiv = divdom; 				ev.dataTransfer.setData("text/html", divdom.innerHTML); 			}  			function drop(ev, divdom) { 				ev.preventDefault(); 				if(srcdiv != divdom) { 					srcdiv.innerHTML = divdom.innerHTML; 					divdom.innerHTML = ev.dataTransfer.getData("text/html"); 				} 			} 		</script> 	</head>  	<body>  		<div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"> 			div1! 		</div> 		<div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"> 			div2! 		</div> 		<div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"> 			div3 		</div>  	</body>  </html>

提示:可以修改后运行.

1、源代码：

JavaScript Code复制内容到剪贴板

<script>
var eleDustbin = $(".dustbin")[0], eleDrags = $(".draglist"), lDrags = eleDrags.length, eleRemind = $(".dragremind")[0], eleDrag = null;
for (var i=0; i<lDrags; i+=1) {
//得到聚焦事件| selectstart事件
eleDrags[i].onselectstart = function() {
console.log("1");
return false;
};
// ondragstart| 用户启动拖动操作时发生
eleDrags[i].ondragstart = function(ev) {
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("text", ev.target.innerHTML);
ev.dataTransfer.setDragImage(ev.target, 0, 0);
eleDrag = ev.target;
return true;
};
// ondragend| 当用户已经完成了拖动操作（释放鼠标按钮或按下ESC）事件
eleDrags[i].ondragend = function(ev) {
ev.dataTransfer.clearData("text");
eleDrag = null;
return false
};
}
eleDustbin.ondragover = function(ev) {
ev.preventDefault();
return true;
};
eleDustbin.ondragenter = function(ev) {
this.style.color = "#ffffff";
return true;
};
eleDustbin.ondrop = function(ev) {
if (eleDrag) {
eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔进了垃圾箱';
eleDrag.parentNode.removeChild(eleDrag);
}
this.style.color = "#000000";
return false;
};
</script>

2、分解——ondragstart：

ondragstart 用户启动拖动操作事件

dataTransfer.effectAllowed 代表所允许的拖动操作 none/copy/copyLink/copyMove/link/linkMove/move/all/uninitialized

none ——该项目可能无法删除

copy 复制 —— 可以在新位置创建源项目的副本

copyLink 复制链接 —— 允许复制或链接操作

copyMove —— 允许复制或移动操作

link 链接 —— 可以在新位置处建立到源的链接

linkMove —— 允许链接或移动操作

move 移动 —— 项目可以移动到新位置

all —— 允许所有操作

uninitialized 未初始化—— 当效果尚未设置时的默认值，等效于全部

dataTransfer.setData 对拖动的元素指定类型和数据（格式，数据） / 同时还有getData()与clearData()

dataTransfer.setDragImage 执行拖动和指定坐标dataTransfer.setDragImage(IMG，xOffset，yOffset)

img —— 图像Element元素用于拖动反馈的图像

xOffset —— 一个long指示水平图像中的偏移量

yOffset —— 一个long指示垂直图像中的偏移量

本文来自于：http://www.yoyo88.cn/study/html5/68.html

在线演示 (10)

上一篇返回列表

下一篇 html5——canvas绘图