<!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. 【Codeforces 493C】Vasya and Basketball

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 枚举三分线(离散后)的位置 然后根据预处理的前缀和,快速算出两个队伍的分数. [代码] #include <bits/stdc++.h& ...

  2. Postman用法简介----https://blog.csdn.net/flowerspring/article/details/52774399

    https://blog.csdn.net/flowerspring/article/details/52774399 Postman用法简介

  3. 在JQuery中$(document.body)和这个$("body") 这两的区别在哪里？

    两种写法代表的是同一个对象 $("body") 是一个选择器,jQuery 会从 DOM 顶端开始搜索,直到找到标签为 body 的元素. 而 $(document.body) 中 ...

  4. 模拟赛 Problem 3 经营与开发(exploit.cpp/c/pas)

    Problem 3 经营与开发(exploit.cpp/c/pas) [题目描述] 4X概念体系,是指在PC战略游戏中一种相当普及和成熟的系统概念,得名自4个同样以“EX”为开头的英语单词. eXpl ...

  5. sql-server-internals-architecture

    http://kevinekline.com/slides/sql-server-internals-architecture/

  6. bridge 上网

    手头有一台机器上有一个虚拟机 虚拟机为桥接 本机为静态IP上网 想让虚拟机上网的方式是 本机不设ip 网卡设置DHCP. 虚拟机设置静态ip

  7. firebug 扩展介绍和下载

    https://getfirebug.com/wiki/index.php/Firebug_Extensions#Firecookie https://addons.mozilla.org/zh-CN ...

  8. Java进程堆外内存（off heap）大小

    一.使用ByteBuffer.allocateDirect分配的off heap内存大小 本机进程 在Jvisualvm中安装 Mbeans插件.然后查看java.nio/BufferPool/dir ...

  9. LeetCode 69. Sqrt(x) （平方根）

    Implement int sqrt(int x). Compute and return the square root of x. x is guaranteed to be a non-nega ...

  10. CoffeeScript里的字符串插值

    拼接字符串是我们常干的事情.与其用很多的 "" + "",不如用一下字符串插值,可读性好些. 方法是在字符串中加入#{ 变量.表达式.函数等} getOther ...