1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jQuery图片拖动排序代码</title>
  6.  
  7. <style type="text/css">
  8.  
  9. .item_container{position:relative;height:auto;overflow:hidden;}
  10. .item_content ul{list-style:none;padding:0;margin:0;}
  11. .item_content ul li{width:200px;height:160px;float:left;margin:10px }
  12. .item_content{width:50%;height:auto;border:1px solid #ccc;float:left;}
  13. .item_content .item{width:200px;height:120px;line-height:120px;text-align:center;cursor:pointer;background:#ccc;}
  14. .item_content .item img{width:200px;height:120px;border-radius:6px;}
  15. .close{display:block;width:20px;height:20px;top:0;right:0;z-index:9999;position:absolute;text-align:center;font-size:16px;cursor:pointer;color:aliceblue;}
  16. </style>
  17.  
  18. </head>
  19. <body>
  20. <div class="item_container">
  21.     <div class="item_content" id="imageChange">
  22.         <ul>
  23.             <li>
  24.                 <div class="item"> <img src="img/500x500-1.png" width="150" height="150">
  25.                  </div>
  26.             </li>
  27.             <li>
  28.                 <div class="item"> <img src="img/500x500-2.png" width="150" height="150">
  29.                  </div>
  30.             </li>
  31.             <li>
  32.                 <div class="item"> <img src="img/500x500-3.png" width="150" height="150">
  33.                  </div>
  34.             </li>
  35.             <li>
  36.                 <div class="item"> <img src="img/500x500-4.png" width="150" height="150">
  37.                  </div>
  38.             </li>
  39.             <li>
  40.                 <div class="item"> <img src="img/500x500-5.png" width="150" height="150">
  41.                  </div>
  42.             </li>
  43.             <li>
  44.                 <div class="item"> <img src="img/500x500-6.png" width="150" height="150">
  45.                  </div>
  46.             </li>
  47.             <li>
  48.                 <div class="item"> <img src="img/500x500-7.png" width="150" height="150">
  49.                  </div>
  50.             </li>
  51.         </ul>
  52.     </div>
  53. </div>
  54. <script src="js/jquery-1.8.3.min.js"></script>
  55. <script>
  56. $(function () {
  57.     function Pointer(x, y) {
  58.         this.x = x;
  59.         this.y = y;
  60.     }
  61.     function Position(left, top) {
  62.         this.left = left;
  63.         this.top = top;
  64.     }
  65.  
  66.     $(".item_container .item").each(function (i) {
  67.         this.init = function () { // 初始化
  68.             this.box = $(this).parent();
  69.             $(this).attr("index", i).css({
  70.                 position: "absolute",
  71.                 left: this.box.position().left,
  72.                 top: this.box.position().top,
  73.                 cursor: "move"
  74.             }).appendTo(".item_container");
  75.             this.drag();
  76.         },
  77.             this.move = function (callback) {  // 移动
  78.                 $(this).stop(true).animate({
  79.                     left: this.box.position().left,//相对父级的距离
  80.                     top: this.box.position().top
  81.                 }, 500, function () {
  82.                     if (callback) {
  83.                         callback.call(this);
  84.                     }
  85.                 });
  86.             },
  87.             this.collisionCheck = function () {
  88.                 var currentItem = this;
  89.                 var direction = null;
  90.  
  91.                 $(this).siblings(".item").each(function () {
  92.                     if (
  93.                         currentItem.pointer.x > this.box.offset().left &&
  94.                         currentItem.pointer.y > this.box.offset().top &&
  95.                         (currentItem.pointer.x < this.box.offset().left + this.box.width()) &&
  96.                         (currentItem.pointer.y < this.box.offset().top + this.box.height())
  97.                     ) {
  98.                         // 返回对象和方向
  99.                         if (currentItem.box.position().top < this.box.position().top) {
  100.                             direction = "down";
  101.                         } else if (currentItem.box.position().top > this.box.position().top) {
  102.                             direction = "up";
  103.                         } else {
  104.                             direction = "normal";
  105.                         }
  106.                         this.swap(currentItem, direction);
  107.                     }
  108.                 });
  109.             },
  110.             this.swap = function (currentItem, direction) { // 交换位置
  111.                 if (this.moveing) return false;
  112.                 var directions = {
  113.                     normal: function () {
  114.                         var saveBox = this.box;
  115.                         this.box = currentItem.box;
  116.                         currentItem.box = saveBox;
  117.                         this.move();
  118.                         $(this).attr("index", this.box.index());
  119.                         $(currentItem).attr("index", currentItem.box.index());
  120.                     },
  121.                     down: function () {
  122.                         // 移到上方
  123.                         var box = this.box;
  124.                         var node = this;
  125.                         var startIndex = currentItem.box.index();
  126.                         var endIndex = node.box.index();;
  127.                         for (var i = endIndex; i > startIndex; i--) {
  128.                             var prevNode = $(".item_container .item[index=" + (i - 1) + "]")[0];
  129.                             node.box = prevNode.box;
  130.                             $(node).attr("index", node.box.index());
  131.                             node.move();
  132.                             node = prevNode;
  133.                         }
  134.                         currentItem.box = box;
  135.                         $(currentItem).attr("index", box.index());
  136.                     },
  137.                     up: function () {
  138.                         // 移到上方
  139.                         var box = this.box;
  140.                         var node = this;
  141.                         var startIndex = node.box.index();
  142.                         var endIndex = currentItem.box.index();;
  143.                         for (var i = startIndex; i < endIndex; i++) {
  144.                             var nextNode = $(".item_container .item[index=" + (i + 1) + "]")[0];
  145.                             node.box = nextNode.box;
  146.                             $(node).attr("index", node.box.index());
  147.                             node.move();
  148.                             node = nextNode;
  149.                         }
  150.                         currentItem.box = box;
  151.                         $(currentItem).attr("index", box.index());
  152.                     }
  153.                 }
  154.                 directions[direction].call(this);
  155.             },
  156.             this.drag = function () { // 拖拽
  157.                 var oldPosition = new Position();
  158.                 var oldPointer = new Pointer();
  159.                 var isDrag = false;
  160.                 var currentItem = null;
  161.                 $(this).mousedown(function (e) {
  162.                     e.preventDefault();
  163.                     oldPosition.left = $(this).position().left;
  164.                     oldPosition.top = $(this).position().top;
  165.                     oldPointer.x = e.clientX;
  166.                     oldPointer.y = e.clientY;
  167.                     isDrag = true;
  168.  
  169.                     currentItem = this;
  170.  
  171.                 });
  172.                 $(document).mousemove(function (e) {
  173.                     var currentPointer = new Pointer(e.clientX, e.clientY);
  174.                     if (!isDrag) return false;
  175.                     $(currentItem).css({
  176.                         "opacity": "0.8",
  177.                         "z-index": 999
  178.                     });
  179.                     var left = currentPointer.x - oldPointer.x + oldPosition.left;
  180.                     var top = currentPointer.y - oldPointer.y + oldPosition.top;
  181.                     $(currentItem).css({
  182.                         left: left,
  183.                         top: top
  184.                     });
  185.                     currentItem.pointer = currentPointer;
  186.                     // 开始交换位置
  187.  
  188.                     currentItem.collisionCheck();
  189.  
  190.                 });
  191.                 $(document).mouseup(function () {
  192.                     if (!isDrag) return false;
  193.                     isDrag = false;
  194.                     currentItem.move(function () {
  195.                         $(this).css({
  196.                             "opacity": "1",
  197.                             "z-index": 0
  198.                         });
  199.                     });
  200.                 });
  201.             }
  202.         this.init();
  203.     });
  204. });
  205.  
  206. </script>
  207.  
  208. </body>
  209. </html>

Jquery 多行拖拽图片排序 jq优化的更多相关文章

  1. Jquery easyui treegrid实现树形表格的行拖拽

    前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...

  2. VUE +element el-table运用sortable 拖拽table排序，实现行排序，列排序

    Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable ...

  3. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  4. jqGrid之treeGrid及行拖拽

    单纯的做个小记录 今天做功能用到了jqGrid里面的treeGrid,遇到几个问题,这里做下记录 treeGrid 树表格的应用在官网给出了很直白的例子: 1.http://blog.mn886.ne ...

  5. 在viewPager中双指缩放图片，双击缩放图片，单指拖拽图片

    我们就把这个问题叫做图片查看器吧,它的主要功能有: (项目地址:https://github.com/TZHANHONG/ImageViewer/releases/tag/1.0,里面的MyImage ...

  6. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  7. android 拖拽图片&拖动浮动按钮到处跑

    来自老外: 拖拽图片效果 方法一: 布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLa ...

  8. js 利用jquery.gridly.js实现拖拽并且排序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. ListView 多行拖拽排序

    核心代码:修改ListView的属性,及绑定事件 // 初始化listView1. private void InitializeListView() { listView1.AllowDrop = ...

随机推荐

  1. tomcat服务器配置把Http协议强制转化为Https

    1)在命令提示符窗口,进入Tomcat目录,执行以下命令: keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass ...

  2. Ubuntu 16.04安装迅雷（兼容性不高）

    迅雷官方没有提供LInux的版本,但是提供了一个Xware的版本,这个是用来制作离线下载的,但是网上已经有人通过这个集成了桌面应用:但是没怎么测试过,稳定性不高. http://forum.ubunt ...

  3. 关于jQuery的append()和prepend()方法的小技巧

    最近工作上有个需求是要求一个自动向上滚动的列表,表有很多行,但只显示一行,每次滚动一行.很简单的一个功能,代码如下 <div class="scroll-area"> ...

  4. Neo4j教程 Neo4j视频教程 Neo4j 图数据库视频教程

    课程发布地址 地址: 腾讯课堂<Neo4j 图数据库视频教程> https://ke.qq.com/course/327374?tuin=442d3e14 作者 庞国明,<Neo4j ...

  5. 使用CDN

    CDN的全称是Content Delivery Network.中文直译过来是:内容交付网络. 它的主要意思是,将某些内容进行交付的网络.对于站点开发而言,我们所讲的内容通常指的是内容文件(比如jav ...

  6. LeetCode 929. Unique Email Addresses (独特的电子邮件地址)

    题目标签:String 题目说明 有两个规则针对于 local name. 所以先把local name 和 domain name 分开. 两个规则是: rule 1:'.' 会被去除. (利用re ...

  7. 第二课 MongoDB 数据模型

    1.课程大纲 本课程主要介绍MongoDB数据模型相关知识.包含文档.集合与数据库的基本概念.用法及命名规则:MongoDB主要的数据类型介绍以及MongoDB Shell的简单介绍与使用. 文档 ( ...

  8. 通达OA 小飞鱼老师OA工作流设计课程教学网络公开课之HTML基础（一）

    通达OA网络教学公开课開始了.有须要的小伙伴们抓住机会奥. 8月29号晚8点不见不散.本次课程的主要内容是通达OA工作流设计课程中须要用到的Html部分学习. 帮忙转发的朋友加送一节VIP课程.

  9. MVC异常过滤器 （错误页）

    控制器 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...

  10. ios5--计算器

    // // ViewController.m // 01-加法计算器 // // 首先找main.m文件,然后找AppDelegate,然后找Main Inteferce主交互故事板,然后加载箭头指向 ...