<!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 1030D】Vasya and Triangle

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 参考这篇题解:https://blog.csdn.net/mitsuha_/article/details/82825862 为什么可以保证m ...

  2. 根据判断数组不为空然后取他的值----数组不会为空---只能判断其size是否大于0

    private List<Integer> classId=new ArrayList<Integer>(); business.getClassId()!=null 以上为错 ...

  3. [luoguP1403] [AHOI2005]约数研究（这。。。）

    传送门 用类似筛法的原理,就好啦 ——代码 #include <cstdio> int n, ans; int a[1000001]; int main() { int i, j; sca ...

  4. 转载 - Struts2基于XML配置方式实现对action的所有方法进行输入校验

    出处:http://www.cnblogs.com/Laupaul/archive/2012/03/15/2398360.html http://www.blogjava.net/focusJ/arc ...

  5. 疫情控制(codevs 1218)

    题目描述 Description H 国有 n 个城市,这 n 个城市用 n-1 条双向道路相互连通构成一棵树,1 号城市是首都, 也是树中的根节点. H 国的首都爆发了一种危害性极高的传染病.当局为 ...

  6. codevs1099 字串变换

    题目描述 Description 已知有两个字串 A$, B$ 及一组字串变换的规则(至多6个规则): A1$ -> B1$ A2$ -> B2$ 规则的含义为:在 A＄中的子串 A1$ ...

  7. So easy

    Problem Description Small W gets two files. There are n integers in each file. Small W wants to know ...

  8. 简单的事件处理类Event

    class Event{ constructor(){ this.handlers=[] } on(type,fn){ //订阅事件 if(!this.handlers[type]){ this.ha ...

  9. Android Message和obtainMessage的差别

    前几天须要实现一个以太网功能就看了以太网的源代码部分,看见了源代码部分在消息处理时,发现有一些不同的地方:   平时我在处理消息时:   1.首先创建Handler对象:   private Hand ...

  10. 线段树+离散化 IP地址段检查 SEGMENT TREE

    Problem: Give a series of IP segments, for example, [0.0.0.1-0.0.0.3], [123.234.232.21-123.245.21.1] ...