javascript DIV上下拖放功能

首先要包含jquery
[jQuery] 两个ul之间li元素的拖拉和排序 HTML代码：
<span class="left">
<b>one</b>
<ul id="list1" style="background-color:#ffee00" name="offJob">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</span>
<span class="left">
<b>two</b>
<ul id="list2" style="background-color:#ffee00" name="onJob">
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
</span>
jQuery代码：
$(function()
{
$("#list1, #list2")dragsort({
dragBetween: true
});
}
);
需要包含的js文件内容：
(function($) {
$fndragsort = function(options) {
var opts = $extend({}, $fndragsortdefaults, options);
var lists = new Array();
var list = null, lastPos = null;
thiseach(function(i, cont) {
var newList = {
draggedItem: null,
placeHolderItem: null,
pos: null,
offset: null,
offsetLimit: null,
container: cont,
init: function() {
$(thiscontainer)attr("listIdx", i)find(optsdragSelector)css("cursor", "pointer")mousedown(thisgrabItem);
},
grabItem: function(e) {
if (ebutton == 2)
return;

if (list != null && listdraggedItem != null)
listdropItem();
$(this)css("cursor", "move");
list = lists[$(this)parents("[listIdx]")attr("listIdx")];
listdraggedItem = $(this)is(optsitemSelector) $(this) : $(this)parents(optsitemSelector);
listoffset = listdraggedItemoffset();
listoffsettop = epageY - listoffsettop;
listoffsetleft = epageX - listoffsetleft;
var containerHeight = $(listcontainer)outerHeight() == 0 Mathmax(1, Mathround(05 +$(listcontainer)find(optsitemSelector)size() listdraggedItemouterWidth() / $(listcontainer)outerWidth())) listdraggedItemouterHeight() : $(listcontainer)outerHeight();
listoffsetLimit = $(listcontainer)offset();
listoffsetLimitright = listoffsetLimitleft + $(listcontainer)outerWidth() - listdraggedItemouterWidth();
listoffsetLimitbottom = listoffsetLimittop + containerHeight - listdraggedItemouterHeight();
listplaceHolderItem =listdraggedItemclone()html(" ")css({ visibility: "hidden",height: listdraggedItemheight() })attr("placeHolder", true);
listdraggedItemafter(listplaceHolderItem);
listdraggedItemcss({ position: "absolute", opacity: 08 });
$(lists)each(function(i, l) { lensureNotEmpty(); lbuildPositionTable(); });
listsetPos(epageX, epageY);
$(document)bind("selectstart", liststopBubble); //stop ie text selection
$(document)bind("mousemove", listswapItems);
$(document)bind("mouseup", listdropItem);
return false; //stop moz text selection
},
setPos: function(x, y) {
var top = y - thisoffsettop;
var left = x - thisoffsetleft;
if (!optsdragBetween) {
top = Mathmin(thisoffsetLimitbottom, Mathmax(top, thisoffsetLimittop));
left = Mathmin(thisoffsetLimitright, Mathmax(left, thisoffsetLimitleft));
}
thisdraggedItemcss({ top: top, left: left });
},
buildPositionTable: function() {
var item = thisdraggedItem == null null : thisdraggedItemget(0);
var pos = new Array();
$(thiscontainer)find(optsitemSelector)each(function(i, elm) {
if (elm != item) {
var loc = $(elm)offset();
locright = locleft + $(elm)width();
locbottom = loctop + $(elm)height();
locelm = elm;
pospush(loc);
}
});
thispos = pos;
},
dropItem: function() {
if (listdraggedItem == null)
return;
$(listcontainer)find(optsdragSelector)css("cursor", "pointer");
listplaceHolderItembefore(listdraggedItem);
listdraggedItemcss({ position: "", top: "", left: "", opacity: "" });
listplaceHolderItemremove();

$("[emptyPlaceHolder]")remove();
optsdragEndapply(listdraggedItem);
listdraggedItem = null;
$(document)unbind("selectstart", liststopBubble);
$(document)unbind("mousemove", listswapItems);
$(document)unbind("mouseup", listdropItem);
return false;
},
stopBubble: function() { return false; },
swapItems: function(e) {
if (listdraggedItem == null)
return false;
listsetPos(epageX, epageY);
var ei = listfindPos(epageX, epageY);
var nlist = list;
for (var i = 0; ei == -1 && optsdragBetween && i < listslength; i++) {
ei = lists[i]findPos(epageX, epageY);
nlist = lists[i];
}
if (ei == -1 || $(nlistpos[ei]elm)attr("placeHolder"))
return false;
if (lastPos == null || lastPostop > listdraggedItemoffset()top || lastPosleft > listdraggedItemoffset()left)
$(nlistpos[ei]elm)before(listplaceHolderItem);
else
$(nlistpos[ei]elm)after(listplaceHolderItem);
$(lists)each(function(i, l) { lensureNotEmpty(); lbuildPositionTable(); });
lastPos = listdraggedItemoffset();
return false;
},
findPos: function(x, y) {
for (var i = 0; i < thisposlength; i++) {
if (thispos[i]left < x && thispos[i]right > x&& thispos[i]top < y && thispos[i]bottom > y)
return i;
}
return -1;
},

ensureNotEmpty: function() {
if (!optsdragBetween)
return;
var item = thisdraggedItem == null null : thisdraggedItemget(0);
var emptyPH = null, empty = true;

$(thiscontainer)find(optsitemSelector)each(function(i, elm) {
if ($(elm)attr("emptyPlaceHolder"))
emptyPH = elm;
else if (elm != item)
empty = false;
});

if (empty && emptyPH == null)
$(thiscontainer)append(listplaceHolderItemclone()removeAttr("placeHolder")attr("emptyPlaceHolder", true));
else if (!empty && emptyPH != null)
$(emptyPH)remove();
}
};
newListinit();
listspush(newList);
});
return this;
};
$fndragsortdefaults = {
itemSelector: "li",
dragSelector: "li",
dragEnd: function() { },
dragBetween: false
};
})(jQuery);

这不需要用jquery，用css就可以满足。给你做了个例子。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=10">

<title>Document</title>

<style>

html,body,box{

margin:0;

padding:0;

height:100%;

overflow:hidden;

font-size:14px;

color:#333333;

}

box{

display:flex;

flex-direction: column;

box-sizing: border-box;

}

top{

height:60px;

background:#999999;

color:#ffffff;

}

left,right{

width:200px;

background:#AAAAAA;

}

center{

flex:1;

}

content{

flex:1;

background:#fafafa;

display:flex;

flex-direction: row;

height:0;

}

bottom{

height:40px;

background:#666666;

color:#ffffff;

}

top,bottom,left,right,center{

align-items: center;

justify-content: center;

display:flex;

}

</style>

</head>

<body>

<div class="box">

<div class="top">top</div>

<div class="content">

<div class="left">left</div>

<div class="center">center</div>

<div class="right">right</div>

</div>

<div class="bottom">bottom</div>

</div>

</body>

</html>

假设html的代码是这样

<div id="test">
可拖拽
<div>

那么一个简单的javascript拖拽的事件是这样，你再根据你的实际需求，进行你的 *** 作
<script>
var div =  documentgetElementById("test");
divonmousedown = function(){
    consolelog("按");
    divonmousemove = function(e){
        consolelog(eclientX);
        consolelog(eclientY);
    }
    divonmouseup=function(){
        consolelog("松开");
        divonmousemove =  "";
    }
}
</script>

你可以在按下移动的时候创建一个div，然后这个div所在的位置根据你拿到的鼠标clientx,y
进行动态改变，然后松开的时候，把这个div删掉，然后实现你的拖拽效果。

不考虑IE6的话就比较简单，判断一下是否到底部，到了之后将这个div的position设置为fixed就好了top值是固定的 但是如果要考虑IE6的话就麻烦一点，因为IE6不支持fixed这个属性你只能通过absolute来处理而此时top值是要不停地改变的，而且在IE6中这个div在滚动时会不停晃动，解决方法是有的但是代价过高，看你的取舍

你可以在初始化这些DIV时，就初始化其对应的辅助线。有一个实现的办法就是n个DIV用2n个新的DIV来实现辅助线的效果，具体做法就是，比如HELLO这个DIV，其辅助线的DIV应当有两个：第一个就是left等于HELLO这个DIV的left值，width也与它宽度相等，但高度等于画布高度，BORDER的CSS中，只有左右有，上下无；第二个就是top等于这个DIV的top值，宽度等于画布宽度，高度与DIV的高度相等，BORDER的CSS只有上下在，左右无。

仔细观察发现，今日头条导航部分编辑效果，有以下几个效果

1：点击编辑开启可以编辑的效果（也就是是否开启拖拽）

2：拖拽前选中效果

3：拖动过程中元素移动到目标位置的运动效果

这是VueDraggable作者的git引入之后我们发现VueDraggable默认就是开启拖拽状态的，那我们要控制这个状态怎么办呢？在作者项目的首页，发现并没有详细介绍，是不是有这个状态提供，当然也许是因为自己英语太渣，没有发现这句话（See here for reference）

后来发现，点进去，发现了很多好玩的东西，具体有哪些，这里我们只挑我们需要的，然后我就发现这个东东：

这不就是我们想要的么，如果你认为是这个属性直绑定到组件上，那么你就错了，在往下看，似乎有怎么使用的实例代码，那我们不妨看看是怎么样的：

其实看到这个你大概知道怎么用了，如果还不会那么不着急，我贴一下我的代码你就知道怎用了

嗯就是这么简单，然后你再去控制这个disable就可以，至于怎么控制，接触过vue的人应该都会，就不说了，到这里我们第一个问题就解决，那我后面两个问题呢？

别急，其实和第一个一模一样

还有一些其他配置项的解释：

1ghostClass:'ghostClass';拖拽中占位的元素的类名（一般设置opacity:1）达到空出该位置的视觉效果

2dragClass:'dragClass';元素拖拽中的类名

哈哈就是这么简单，惊不惊喜，意不意外！！！之前之所以，称之为问题是因为，以为那些配置项都是直接配置在组件上的，好了上面三个问题基本算是解决了，其实我们发现，这个过程中烦在哪里，就是知道配置项options是挂在在draggable组件上，那些控制draggable的行为都是在options里面配置的，经验告诉我们，一定要仔细阅读文档，答案都在文档里面，好了，如果能帮助到正在看文章的你

网上有插件，我这也有案例代码，要是贴上来就太多了，我以前写了个放windows窗口的效果，你可以参考一下，代码如下，全部复制出去，修改下jquery库的路劲就可以测试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">