<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jQuery图片拖动排序代码</title>

<style type="text/css">

.item_container{position:relative;height:auto;overflow:hidden;}

.item_content ul{list-style:none;padding:0;margin:0;}

.item_content ul li{width:200px;height:160px;float:left;margin:10px }

.item_content{width:50%;height:auto;border:1px solid #ccc;float:left;}

.item_content .item{width:200px;height:120px;line-height:120px;text-align:center;cursor:pointer;background:#ccc;}

.item_content .item img{width:200px;height:120px;border-radius:6px;}

.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;}

</style>

</head>

<body>

<div class="item_container">

    <div class="item_content" id="imageChange">

        <ul>

            <li>

                <div class="item"> <img src="img/500x500-1.png" width="150" height="150">

                 </div>

            </li>

            <li>

                <div class="item"> <img src="img/500x500-2.png" width="150" height="150">

                 </div>

            </li>

            <li>

                <div class="item"> <img src="img/500x500-3.png" width="150" height="150">

                 </div>

            </li>

            <li>

                <div class="item"> <img src="img/500x500-4.png" width="150" height="150">

                 </div>

            </li>

            <li>

                <div class="item"> <img src="img/500x500-5.png" width="150" height="150">

                 </div>

            </li>

            <li>

                <div class="item"> <img src="img/500x500-6.png" width="150" height="150">

                 </div>

            </li>

            <li>

                <div class="item"> <img src="img/500x500-7.png" width="150" height="150">

                 </div>

            </li>

        </ul>

    </div>

</div>

<script src="js/jquery-1.8.3.min.js"></script>

<script>

$(function () {

    function Pointer(x, y) {

        this.x = x;

        this.y = y;

    }

    function Position(left, top) {

        this.left = left;

        this.top = top;

    }

    $(".item_container .item").each(function (i) {

        this.init = function () { // 初始化

            this.box = $(this).parent();

            $(this).attr("index", i).css({

                position: "absolute",

                left: this.box.position().left,

                top: this.box.position().top,

                cursor: "move"

            }).appendTo(".item_container");

            this.drag();

        },

            this.move = function (callback) {  // 移动

                $(this).stop(true).animate({

                    left: this.box.position().left,//相对父级的距离

                    top: this.box.position().top

                }, 500, function () {

                    if (callback) {

                        callback.call(this);

                    }

                });

            },

            this.collisionCheck = function () {

                var currentItem = this;

                var direction = null;

                $(this).siblings(".item").each(function () {

                    if (

                        currentItem.pointer.x > this.box.offset().left &&

                        currentItem.pointer.y > this.box.offset().top &&

                        (currentItem.pointer.x < this.box.offset().left + this.box.width()) &&

                        (currentItem.pointer.y < this.box.offset().top + this.box.height())

                    ) {

                        // 返回对象和方向

                        if (currentItem.box.position().top < this.box.position().top) {

                            direction = "down";

                        } else if (currentItem.box.position().top > this.box.position().top) {

                            direction = "up";

                        } else {

                            direction = "normal";

                        }

                        this.swap(currentItem, direction);

                    }

                });

            },

            this.swap = function (currentItem, direction) { // 交换位置

                if (this.moveing) return false;

                var directions = {

                    normal: function () {

                        var saveBox = this.box;

                        this.box = currentItem.box;

                        currentItem.box = saveBox;

                        this.move();

                        $(this).attr("index", this.box.index());

                        $(currentItem).attr("index", currentItem.box.index());

                    },

                    down: function () {

                        // 移到上方

                        var box = this.box;

                        var node = this;

                        var startIndex = currentItem.box.index();

                        var endIndex = node.box.index();;

                        for (var i = endIndex; i > startIndex; i--) {

                            var prevNode = $(".item_container .item[index=" + (i - 1) + "]")[0];

                            node.box = prevNode.box;

                            $(node).attr("index", node.box.index());

                            node.move();

                            node = prevNode;

                        }

                        currentItem.box = box;

                        $(currentItem).attr("index", box.index());

                    },

                    up: function () {

                        // 移到上方

                        var box = this.box;

                        var node = this;

                        var startIndex = node.box.index();

                        var endIndex = currentItem.box.index();;

                        for (var i = startIndex; i < endIndex; i++) {

                            var nextNode = $(".item_container .item[index=" + (i + 1) + "]")[0];

                            node.box = nextNode.box;

                            $(node).attr("index", node.box.index());

                            node.move();

                            node = nextNode;

                        }

                        currentItem.box = box;

                        $(currentItem).attr("index", box.index());

                    }

                }

                directions[direction].call(this);

            },

            this.drag = function () { // 拖拽

                var oldPosition = new Position();

                var oldPointer = new Pointer();

                var isDrag = false;

                var currentItem = null;

                $(this).mousedown(function (e) {

                    e.preventDefault();

                    oldPosition.left = $(this).position().left;

                    oldPosition.top = $(this).position().top;

                    oldPointer.x = e.clientX;

                    oldPointer.y = e.clientY;

                    isDrag = true;

                    currentItem = this;

                });

                $(document).mousemove(function (e) {

                    var currentPointer = new Pointer(e.clientX, e.clientY);

                    if (!isDrag) return false;

                    $(currentItem).css({

                        "opacity": "0.8",

                        "z-index": 999

                    });

                    var left = currentPointer.x - oldPointer.x + oldPosition.left;

                    var top = currentPointer.y - oldPointer.y + oldPosition.top;

                    $(currentItem).css({

                        left: left,

                        top: top

                    });

                    currentItem.pointer = currentPointer;

                    // 开始交换位置

                    currentItem.collisionCheck();

                });

                $(document).mouseup(function () {

                    if (!isDrag) return false;

                    isDrag = false;

                    currentItem.move(function () {

                        $(this).css({

                            "opacity": "1",

                            "z-index": 0

                        });

                    });

                });

            }

        this.init();

    });

});

</script>

</body>

</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. [luoguP2045] 方格取数加强版（最小费用最大流）

    传送门 水题 ——代码 #include <queue> #include <cstdio> #include <cstring> #include <ios ...

  2. tomcat上传图片失败

    今天,突然遇到个奇怪的问题,tomcat上传图片时好时坏,经查线上四台服务有一台服务器硬盘满了. 解决一下硬盘空间的问题,有好使了,那么图片上传通过流写到远程对象存储服务中,并没有落盘和硬盘满有哪些关 ...

  3. Spring Boot配置文件规则以及使用方法官方文档查找以及Spring项目的官方文档查找方法

    比如要使用Spring Boot实现一个功能,最直接的方式是Google,但是往往搜索出来的都比较乱,关键是乱在不同的版本上,比如1.x版本和2.x版本的配置是不一样的.最明显区别是在使用Thymel ...

  4. Java设计模式补充：回调模式、事件监听器模式、观察者模式（转）

    一.回调函数 为什么首先会讲回调函数呢?因为这个是理解监听器.观察者模式的关键. 什么是回调函数 所谓的回调,用于回调的函数. 回调函数只是一个功能片段,由用户按照回调函数调用约定来实现的一个函数. ...

  5. 配置类Configuration怎样使用

    public class CorsConfiguration { /** * Wildcard representing <em>all</em> origins, metho ...

  6. priority_queue实现

    #include <algorithm> using namespace std; /* priority_queue只允许在底端加入元素,并从顶端取出元素, 其内部元素不是依照被推入的次 ...

  7. QT如何修改编程语言的字体

    工具-选项,然后在文本编辑器中设置要的字体

  8. Ubuntu13.10添加/删除PPA

    什么是ppa ppa即Personal Package Archive(个人安装包文档),简单来说就是一些个人或者团体通过独立的网站发布的第三方的软件源.将这些软件源添加到你的电脑上后,你就可以像使用 ...

  9. ios MetalPerformanceShaders 使用总结

    MPSCNNConvolution 1.初始化时传人 UnsafePointer<Float> 时要传入w,不能是 &(w[0]).否则w其实传入失败,卷积的结果是nan或inf. ...

  10. shell curl 实现rest 并发测试

    for i in {1..50}; do curl http://10.43.95.26:5812/rdk/service/app/example/server/my_service & do ...