<!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 Round #226 (Div. 2) C题

    数论好题 题目要求:求给定序列的素因子如果在给定区间内该数字个数加1; 思路:打表时求出包含给素数因子的数的个数,详见代码 1 #include<cstring> +;      scan ...

  2. [K/3Cloud]ksql翻译札记

    2011-11-16 又学一招,集合转化临时表的方法: var sql = string.Format(@"select b.FENTRYID,a.{2} from {0} a inner ...

  3. codevs1197 Vigenère密码

    题目描述 Description 16 世纪法国外交家Blaise de Vigenère设计了一种多表密码加密算法——Vigenère密码.Vigenère 密码的加密解密算法简单易用,且破译难度比 ...

  4. [BZOJ1096][ZJOI2007]仓库建设（斜率优化DP）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1096 分析: 假设1~10,如果在3 6 10建立仓库,那么当前建立仓库决策下的最优值 ...

  5. MySQL: 打开binlog选项后无法重启MySQL

    binlog目录权限不足导致,用chown mysql:mysql <log folder>即可解决此问题.

  6. python集合可以进行相减

    python集合可以进行相减 student = {'tom','jim','mary','tom','jack','rose'} print(student) print('rose' in stu ...

  7. iOS8開始默认语言有变化

    [问题] 測试组发现APP在iOS8及以上系统设备上,语言设置为我们不支持的小语种时.APP没有使用默认的英文,而是选择了上一次设置的语言. [分析] 经过研究发现,在iOS8系统開始,在设备语言设置 ...

  8. AOP设计场景

    AOP就是切面编程的一个思想,当然完毕一项编码任务,发现有些东西是反复工作,这时就能够考虑使用AOP编程.把一些共性的东西交给它来完毕,我们仅仅关心业务逻辑的东西,最精彩用的场景有两种: 一,控制数据 ...

  9. javascript 中文与Unicode相互转化

      javascript 中文与Unicode相互转化 CreateTime--2018年3月30日11:26:50 Author:Marydon /** * 中文与Unicode的相互转换 */ v ...

  10. iOS 打开扬声器以及插入耳机的操作

    废话不多说说一下现状 网上好多关于扬声器的操作,可是问题多多.SDK7.X 和SDK7.X以上版本号有点诧异 #import <Foundation/Foundation.h> #impo ...