html 实现托放排序
Posted thinline
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 实现托放排序相关的知识，希望对你有一定的参考价值。
用到了H5 所添加的拖放api
第一步 设置属性
那就是把元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true，可直接拖放
draggable='true'第二步 绑定事件
一共由7个事件，但并不是每一个都必须使用，简单的介绍以下
被拖动的源对象可以触发的事件：
(1)ondragstart：源对象开始被拖动
(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend：源对象被拖动结束
用于放置源对象的目标对象可以触发的事件：
(1)ondragenter：目标对象被源对象拖动着进入
(2)ondragover：目标对象被源对象拖动着悬停在上方
(3)ondragleave：源对象拖动着离开了目标对象
(4)ondrop：源对象拖动着在目标对象上方释放/松手
注意坑：并不需要每一个元素都绑定事件，只需要在最外部的标签中绑定了事件，那么该标签内的所有元素都会被绑定上该事件。就好比我们给一个容器绑定了click事件，如果点击了该容器中的其它元素，也会触发click事件一样；
那么如何在目标对象和源对象之间进行数据传递呢？
使用 e.dataTransfer 对象的setData( k, ?v )和getData( k )方法；
具体案例
来看一个具体案例吧，从任务池中选取任务，然后可以对任务进行排序。
直接看代码
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>拖拽排序</title>
<meta name="generator" content="EverEdit" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
#flowPool ul,#nodePool ullist-style: none;padding:0 5px;margin: 0;
#flowPool ul li,#nodePool ul li,#flowTemp
float: left;
margin:5px 0px;
width:100%;
cursor: -webkit-grab;
#flowPool ul li:active,#nodePool ul li:active,#flowTemp
cursor: -webkit-grabing;
#flowTemp
outline: 1px solid #000;
outline-style: dotted;
.node
border: 1px solid #999;
.test
width:40%;
float: left;
border: 1px solid #999;
margin:4%;
#nodePoolbackground: #eee ;
#flowPoolbackground: #ccc;position: relative;
#flowPool .dissociateopacity: 0.2;
-moz-opacity: 0.2;
filter:alpha(opacity=20);
#flowPoolULmin-height:100px;overflow: hidden;
</style>
</head>
<body>
<div id="nodePool" class="test">
<ul>
<li data-node-id="1" draggable="true">
<div class="node" >
节点1
</div>
</li>
<li data-node-id="2" draggable="true">
<div class="node" >
节点2
</div>
</li>
<li data-node-id="3" draggable="true">
<div class="node">
节点3
</div>
</li>
<li data-node-id="4" draggable="true">
<div class="node">
节点4
</div>
</li>
</ul>
</div>
<div id="flowPool" class="test">
<ul id="flowPoolUL" >
</ul>
</div>
<ul style="display: none;">
<li id="flowTemp" class="flowTemp">
</li>
</ul>
</body>
<script type="text/javascript">
(function(source,target,temp)
var moveItem
//绑定源对象事件
source.ondragstart = function(e) //开始拖动源对象
console.log("ragstart")
console.log(e)
moveItem = $(e.target).clone()
source.ondrag = function()
source.ondragend = function(e)
console.log("ragstart")
console.log(e)
temp.remove();
target.ondragstart = function(e) //开始拖动源对象
console.log("ragstart")
console.log(e)
$(e.target).addClass("dissociate")
moveItem = $(e.target)
target.ondrag = function()
target.ondragend = function()
temp.remove();
moveItem?moveItem.remove():null;
//绑定目标对象事件
target.ondragenter=function(e)
e.stopPropagation();
console.log("enter")
console.log(e)
if(e.target.className=='node')
$(e.target).parent('li').before(temp.get(0));
else if(e.target.id=='flowPoolUL')
target.append(temp.get(0));
target.ondragover=function(e)
//console.log("dragover");
e.preventDefault(); //这样才可以触发ondrop事件
target.ondrop = function(e)
console.log("drop")
moveItem.removeClass("dissociate")
temp.after(moveItem);
moveItem=null;
target.ondragleave = function(e)
e.stopPropagation();
e.preventDefault();
console.log("leave")
)(nodePool,flowPoolUL,$('#flowTemp').clone())
</script>
</html>
source：任务池对象，从中选出任务，也就是存放了需要的渊对象
target：任务流程，可以进行排序，也就是用以存放源对象的目标对象
temp：没什么业务功能，注要用来标记任务将会插入的位置
moveItem：移动中的对向，就是源对象
以上是关于html 实现托放排序的主要内容，如果未能解决你的问题，请参考以下文章