<!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. 什么是Spring Boot简介

    1.什么是spring boot 简单的说,spring boot就是整合了很多优秀的框架,不用我们自己手动的去写一堆xml配置然后进行配置. 从本质上来说,Spring Boot就是Spring,它 ...

  2. 解决CDH SparkStreaming任务启动之后executor不停增长的问题,num-executors配置不管用。

    spark2-submit --class SparkKafka --master yarn --executor-memory 1G --num-executors 6 --driver-memor ...

  3. 好不容易帮同事写的一个awk，要记下来

    给昌哥写的过滤的东东. 是实现了,但感觉丑,不规范. 记得下先. 原始数据格式: -- :: [ pool--thread-: ] - [ DEBUG ] origin match ::, user: ...

  4. docker mysql 主从配置

    docker安装运行单实例的MySQL参考另一篇文档 http://www.cnblogs.com/manger/p/7611309.html 1.首先在/data/script下创建两个文件my-m ...

  5. eclipse编译项目用maven编译问题

    1.eclipse只是个ide开发环境,并没有编译器功能.没有编译器.eclipse编译项目只是调jdk本地的java编译器.maven是单独编译,eclipse可以调用maven编译, 在eclip ...

  6. 在Ubuntu平台上创建Cordova Camera HTML5应用

    在这篇文章中,我们将具体介绍怎样使用Cordova Camera HTML5 应用.很多其它关于Cordova的开发指南,开发人员能够參考文章"the Cordova Guide" ...

  7. ZOJ2599：Graduated Lexicographical Ordering(很经典的数位DP)

    Consider integer numbers from 1 to n. Let us call the sum of digits of an integer number its weight. ...

  8. 《天龙八部》及Ogre3D模型的3ds max导入插件(源码公布)

    測试UE4项目.苦于没有像样的模型和动画资源,所以想到把<天龙八部>等网游的资源导出来用. 于是做了个max导入插件. 效果还是不错的. 效果图: 上图是<斗破苍穹>的游戏资源 ...

  9. 模块化开发（三）---通过node.js学习模块化开发

    由于改文章有点大,部分代码格式有点问题,编辑之后博客园莫名其妙推出,有问题可以留言沟通.   什么是Node? 它是一个在浏览器之外可以解析和执行javascript代码的运行环 境,或者说是一个运行 ...

  10. 从头认识java-13.7 什么时候使用泛型？

    这一章节我们来讨论一下什么时候使用泛型? 答案:当你希望代码能够跨多个类型(不同的类型,不包括继承关系)工作的时候. 1.当没有确切类型的时候 以下是错误的代码: package com.ray.ch ...