标签：tps type relative def addclass eee city 拖拽 lis
那就是把元素的 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 ul{list-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%;
}
#nodePool{background: #eee ;}
#flowPool{background: #ccc;position: relative;}
#flowPool .dissociate{opacity: 0.2;
-moz-opacity: 0.2;
filter:alpha(opacity=20);
}
#flowPoolUL{min-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：移动中的对向，就是源对象
标签：tps type relative def addclass eee city 拖拽 lis
原文地址：https://www.cnblogs.com/thinline/p/10970074.html
