JQuery对元素拖拽排序，元素拖拽，JQuery拖拽

源码：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中文网

JQuery对元素拖拽排序，元素拖拽，JQuery拖拽相关推荐

vue项目中五小一大六宫格拖拽排序，6宫格拖拽换位，矩阵拖拽排序
背景:项目中用到1.4.6.9.12.16宫格排序,拖拽换位等场景,项目是监控的视频矩阵,用户矩阵拖拽排序换位,之前已经实现1.4.9.12.16等矩阵式排列的拖拽排序,但是六宫格要求五小一大,之前的 ...
Sortable简单好用的拖拽排序工具
Sortable超简单好用的拖拽排序工具很好的拖拽排序工具,支持原始js,vue ,react,angular,可惜官网访问太慢,将文档整理放博客里,随时访问,https://www.npmjs.c ...
uniapp实现九宫格拖拽排序（movable-view）
功能包括:选择多张图片上传,单击预览图片,长按拖拽排序,本文主要讲解拖拽排序的实现效果图如下: 实现思路: 1.定义imgList数组,存放图片元素: 2.长按图片时记录当前移动元素index,简称 ...
ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable
今天给小伙伴们分享一款纵享丝滑般体验的Vue拖拽树形表格DragTreeTable. vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件.支持拖拽排序.固定表头.拖拽 ...
vue项目中，兼容vue3.0 1.0 2.0 宫格拖拽排序，特殊五小一大六宫格拖拽
前端时间写了标准宫格拖拽排序的文章 1. 2.4.9.12等等标准宫格拖拽,基于vue-grid-layout 拖拽换位无刷新 vue项目中基于vue-grid-layout开发的拖拽 ...
JQuery 拖拽元素,并移动其他元素位置
JQuery 拖拽元素,并移动其他元素位置 <!DOCTYPE html> <html> <head><meta charset="UTF-8&qu ...
拖拽删除元素、拖拽排序、拖拽预览图片和拖拽移动元素
介绍 HTML5 提供了专门的拖拽与拖放的 API,目前各浏览器都已支持,包括 IE.HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能.例如,用户可使用鼠标选择可拖 ...
jquery回弹_创意网页DOM元素拖拽弹性反弹和变形动画特效
这是一款非常有创意的HTML网页DOM元素拖拽弹性反弹和变形动画特效.这个特效中有两种效果:第一种是弹性模态窗口效果,第二种是弹性幻灯片效果.这两种效果均可以拖拽DOM元素,然后释放它们时生成非常震撼 ...
jquery实现表格拖拽排序
1.引入:jQuery文件和jquery-ui.js <script src="@{'/public/javascripts/jquery-1.11.1.min.js'}" ...
html列表拖拽排序插件,可对列表自由拖拽排序的jQuery插件
dragslot.js是一款可以对列表自由拖拽排序的jQuery插件.该插件主要的功能是实现了列表项可以在各个列表中相互拖拽. 对于像todo list, 分配任务列表都可以应用这个效果. 使用方法 ...

JQuery对元素拖拽排序，元素拖拽，JQuery拖拽

JQuery对元素拖拽排序，元素拖拽，JQuery拖拽相关推荐

最新文章

热门文章