源码：JQuery拖动元素进行排序，JS元素拖动Demo-Javascript文档类资源-CSDN下载
前阵子项目前端界面有一个拖动元素进行排序的功能，很是头疼（我一个后端人员，平时替补前端画个页面也够难为人了，拖动排序这个东西要怎么搞？）。
预期效果图：
于是网上各种搜索，有用vue的（咱不会），有用js插件的（实现效果与预期不符），后来看到有用CSS中position定位来跟踪鼠标移动的，觉得可行，至少在我能理解的范围内。
简单来说就是让元素跟踪鼠标位置，然后判断其在页面显示元素列表中的像素位置，从而判断其在数据列表中的位置。
下面是原理的代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动div</title>
<style type="text/css">
body{margin:0px;padding:0px;border:none;position:relative;}
.div1 {width:100px;height:100px;background:#ff0000;position:absolute;top:0px;left:0px;}
.div2 {width:100px;height:100px;background:#00ff00;position:absolute;top:0px;left:110px;}
.div3 {width:100px;height:100px;background:#0000ff;position:absolute;top:0px;left:220px;}
</style>
<script src="http://code.jquery.com/jquery-1.9.0rc1.js"></script>
<script type="text/javascript">
var move=false;
var element;
$(function(){
var _x,_y;
$(".div").mousedown(function(e){
move = true;
element = $(this);
_x=e.pageX-parseInt($(this).css("left"));
_y=e.pageY-parseInt($(this).css("top"));
})
$(document).mousemove(function(e){
if(move){
var x = e.pageX-_x;
var y = e.pageY-_y;
$(element).css({"top":y,"left":x});
}
}).mouseup(function(){
move = false;
})
})
</script>
</head>
<body>
<div class="div div1">1</div>
<div class="div div2">2</div>
<div class="div div3">3</div>
</body>
</html>运行结果：
好了，拖动的基础有了，接下来开始搞正式的开发。业务代码不能上，所以整了一个demo。
先来一个默认展示的列表：
点击“+”弹出定制窗口：
html部分代码：
<body>
<div id="leftArea"></div>
<div>点击+号开启区域定制</div>
<div class="areaCustomMark"></div>
<div class="areaCustom">
<div class="areaCustom-header">
<div class="header-icon"></div>
<div class="header-label">区域定制</div>
<div class="header-close"></div>
</div>
<div class="areaCustom-content">
<div class="area-label">区域选择</div>
<div class="area-custom" id="area-custom"></div>
<div class="station-custom" id="station-custom"></div>
<div class="message">注：第一排区域即首页显示的定制区域，鼠标拖动可定制和排序。</div>
</div>
<div class="areaCustom-bottom">
<div class="button" id="areabuttom_bc">保存设置</div>
<div class="button" id="areabuttom_qx">取消设置</div>
<div class="button" id="areabuttom_mr">恢复默认</div>
</div>
</div>
</body>js部分代码：
function initAreaCustom(){//初始化区域定制
html = "<div class='centerLine'><div class='l-left'></div><div class='l-center'>以上区域在首页显示（最多"+maxCustomCount+"个）</div><div class='l-right'></div></div>";
if(typeof(userCustomList)!='object' || userCustomList==null || userCustomList.length==0){
userCustomList = [];
userUnCustomList = [];
for(var i=0; i<areaDefaultList.length; i++){
if(i<maxCustomCount){
userCustomList.push(areaDefaultList[i]);
html += "<div class='areaSelect up orderNo-"+i+"' value='"+areaDefaultList[i].acode+"' index='"+i+"' typt='"+areaDefaultList[i].type+"'><div class='a-name noselect' title='"+areaDefaultList[i].name+"'>"+areaDefaultList[i].name+"</div><div class='a-icon'></div></div>";
}else{
userUnCustomList.push(areaDefaultList[i]);
html += "<div class='areaSelect down down"+parseInt(i/maxCustomCount)+" orderNo-"+parseInt(i%maxCustomCount)+"' value='"+areaDefaultList[i].acode+"' index='"+parseInt(i%maxCustomCount)+"' typt='"+areaDefaultList[i].type+"'><div class='a-name noselect' title='"+areaDefaultList[i].name+"'>"+areaDefaultList[i].name+"</div><div class='a-icon'></div></div>";
}
}
}else{
for(var i=0; i<userCustomList.length; i++){
html += "<div class='areaSelect up orderNo-"+i+"' value='"+userCustomList[i].acode+"' index='"+i+"' typt='"+areaDefaultList[i].type+"'><div class='a-name noselect' title='"+userCustomList[i].name+"'>"+userCustomList[i].name+"</div><div class='a-icon'></div></div>";
}
for(var i=0; i<userUnCustomList.length; i++){
html += "<div class='areaSelect down down"+parseInt(i/maxCustomCount + 1)+" orderNo-"+parseInt(i%maxCustomCount)+"' value='"+userUnCustomList[i].acode+"' index='"+i+"' typt='"+userUnCustomList[i].type+"'><div class='a-name noselect' title='"+userUnCustomList[i].name+"'>"+userUnCustomList[i].name+"</div><div class='a-icon'></div></div>";
}
var height = 4+customDivWidth+customDivHeight*parseInt((userUnCustomList.length+maxCustomCount-1)/maxCustomCount);
$("#area-custom").css("height", height+"px");
}
$("#area-custom").empty();
$("#area-custom").html(html);
var ismove;
var _x,_y,_w,_h,_l,_t,x,y;
var element;
var zindex;
$(".areaSelect").mousedown(function(e){
ismove = true;
element = $(this);
zindex = parseInt($(this).css("z-index"));
$(this).addClass("active");
_w = $("#area-custom").width() - $(this).outerWidth();
_h = $("#area-custom").height() - $(this).outerHeight() + $(".province-label").height() + $("#station-custom").height();
_l = parseInt($(this).css("left"));
_t = parseInt($(this).css("top"));
_x = e.pageX - _l;
_y = e.pageY - _t;
})
$(document).mousemove(function(e){
if(ismove){//只有在拖动状态时才执行
x = e.pageX-_x;//控件左上角到屏幕左上角的相对位置
y = e.pageY-_y;
if(x<0){ x=0; }
if(y<0){ y=0; }
if(x>_w){ x=_w; }
if(y>_h){ y=_h; }
$(element).css({"top":y,"left":x,"z-index":(zindex+1)});
$(".areaSelect.up").removeClass("borderL");
$(".areaSelect.up").removeClass("borderR");
if(y<=customDivHeight && _t<=customDivHeight){//单纯的排序
var index = 0;
var unindex = parseInt($(element).attr("index"));
for(var i=0; i<maxCustomCount; i++){
if((customDivWidth/2+(i-1)*customDivWidth)<x && x<=(customDivWidth/2+i*customDivWidth)){
index = i;
break;
}
}
console.log(index, unindex)
if(index == unindex){
if(index-1 >= 0){
$(".areaSelect.up").eq(index-1).addClass("borderR");
}
if(index+1 <= userCustomList.length-1){
$(".areaSelect.up").eq(index+1).addClass("borderL");
}
}else{
if(index >= 0){
$(".areaSelect.up").eq(index).addClass("borderL");
}
if(index-1 >= 0){
if(index-1 == unindex){
$(".areaSelect.up").eq(index-2).addClass("borderR");
}else if(index-1 <= userCustomList.length-1){
$(".areaSelect.up").eq(index-1).addClass("borderR");
}else{
if(unindex == userCustomList.length-1){
$(".areaSelect.up").eq(userCustomList.length-2).addClass("borderR");
}else{
$(".areaSelect.up").eq(userCustomList.length-1).addClass("borderR");
}
}
}
}
}else if(y<=customDivHeight && _t>customDivHeight){//移入
var index = 0;
for(var i=0; i<maxCustomCount; i++){
if((customDivWidth/2+(i-1)*customDivWidth)<x && x<=(customDivWidth/2+i*customDivWidth)){
index = i;
break;
}
}
if(index >= 0){
$(".areaSelect.up").eq(index).addClass("borderL");
}
if(index-1 >= 0){
if(index <= userCustomList.length-1){
$(".areaSelect.up").eq(index-1).addClass("borderR");
}else{
$(".areaSelect.up").eq(userCustomList.length-1).addClass("borderR");
}
}
}
}else{//复位
$(element).css({"top":_t,"left":_l,"z-index":zindex});
}
}).mouseup(function(){
if(ismove){//只有在拖动状态时才执行
if(y<=customDivHeight && _t<=customDivHeight){//单纯的排序
var index = 0;
for(var i=0; i<maxCustomCount; i++){
if((customDivWidth/2+(i-1)*customDivWidth)<x && x<=(customDivWidth/2+i*customDivWidth)){
index = i;
break;
}
}
var tempCustomList = [];
var unindex = parseInt($(element).attr("index"));
var temp = userCustomList[unindex];
for(var i=0; i<userCustomList.length; i++){
if(i == index){
tempCustomList.push(userCustomList[unindex]);
}
if(i != unindex){
tempCustomList.push(userCustomList[i]);
}
}
if(index > userCustomList.length-1){
tempCustomList.push(userCustomList[unindex]);
}
userCustomList = tempCustomList;
initAreaCustom();
}else if(y<=customDivHeight && _t>customDivHeight){//移入
var index = 0;
for(var i=0; i<maxCustomCount; i++){
if((customDivWidth/2+(i-1)*customDivWidth)<x && x<=(customDivWidth/2+i*customDivWidth)){
index = i;
break;
}
}
var tempCustomList = [];
var tempUnCustomList = [];
var tempStationCustomList = [];
var unindex = parseInt($(element).attr("index"));
if(index<maxCustomCount && index>userCustomList.length-1){
userCustomList.push(userUnCustomList[unindex]);
for(var i=0; i<userUnCustomList.length; i++){
if(i != unindex){
tempUnCustomList.push(userUnCustomList[i]);
}
}
userUnCustomList = tempUnCustomList;
}else{
for(var i=0; i<userCustomList.length; i++){
if(i == index){
tempCustomList.push(userUnCustomList[unindex]);
}
if(userCustomList.length<maxCustomCount){
tempCustomList.push(userCustomList[i]);
}else{
if(i < userCustomList.length-1){
tempCustomList.push(userCustomList[i]);
}else{
if(userCustomList[i].type=="area"){
userUnCustomList.push(userCustomList[i]);
}
}
}
}
for(var i=0; i<userUnCustomList.length; i++){
if(i != unindex){
tempUnCustomList.push(userUnCustomList[i]);
}
}
userCustomList = tempCustomList;
userUnCustomList = tempUnCustomList;
}
initAreaCustom();
}else if(y>customDivHeight && _t<=customDivHeight){//移出
if(userCustomList.length>1){
var index = parseInt($(element).attr("index"));
if(userCustomList[index].type=="area"){
userUnCustomList.push(userCustomList[index]);
}
var tempCustomList = [];
for(var i=0; i<userCustomList.length; i++){
if(i != index){
tempCustomList.push(userCustomList[i]);
}
}
userCustomList = tempCustomList;
initAreaCustom();
}else{
alert("至少保留一个区域")
$(element).css({"top":_t,"left":_l});//复位
}
}else{//复位
$(element).css({"top":_t,"left":_l});
}
}else{//复位
$(element).css({"top":_t,"left":_l});
}
ismove = false;
$(element).css({"z-index":zindex});
$(element).removeClass("active");
});
$(".areaSelect.up .a-icon").each(function(index){//移出
$(this).click(function(){
if(userCustomList.length>1){
if(userCustomList[index].type=="area"){
userUnCustomList.push(userCustomList[index]);
}
var tempCustomList = [];
for(var i=0; i<userCustomList.length; i++){
if(i != index){
tempCustomList.push(userCustomList[i]);
}
}
userCustomList = tempCustomList;
initAreaCustom();
}else{
alert("至少保留一个区域")
}
})
})
$(".areaSelect.down .a-icon").each(function(index){//移入
$(this).click(function(){
if(userCustomList.length<maxCustomCount){
userCustomList.push(userUnCustomList[index]);
var tempUnCustomList = [];
for(var i=0; i<userUnCustomList.length; i++){
if(i != index){
tempUnCustomList.push(userUnCustomList[i]);
}
}
userUnCustomList = tempUnCustomList;
initAreaCustom();
}else{
alert("最多选择"+maxCustomCount+"个区域")
}
})
})
}代码有点多，还有图标什么的，文章里没法贴，完整代码链接：JQuery拖动元素进行排序，JS元素拖动Demo-Javascript文档类资源-CSDN下载
最终效果：
点击下载完整源码：JQuery拖动元素进行排序，JS元素拖动Demo-Javascript文档类资源-CSDN下载
本文的代码是作者对标项目需求手写的代码（主要是找的一些插件效果不符合项目需求），不建议新手操作，可用作JS能力提升。
推荐JS插件：SortableJS，官网：Sortable.js中文网