Jquery 多行拖拽图片排序 jq优化
<!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优化的更多相关文章
- Jquery easyui treegrid实现树形表格的行拖拽
前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...
- VUE +element el-table运用sortable 拖拽table排序，实现行排序，列排序
Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- jqGrid之treeGrid及行拖拽
单纯的做个小记录 今天做功能用到了jqGrid里面的treeGrid,遇到几个问题,这里做下记录 treeGrid 树表格的应用在官网给出了很直白的例子: 1.http://blog.mn886.ne ...
- 在viewPager中双指缩放图片，双击缩放图片，单指拖拽图片
我们就把这个问题叫做图片查看器吧,它的主要功能有: (项目地址:https://github.com/TZHANHONG/ImageViewer/releases/tag/1.0,里面的MyImage ...
- 基于html5可拖拽图片循环滚动切换
分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="s ...
- android 拖拽图片&拖动浮动按钮到处跑
来自老外: 拖拽图片效果 方法一: 布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLa ...
- js 利用jquery.gridly.js实现拖拽并且排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ListView 多行拖拽排序
核心代码:修改ListView的属性,及绑定事件 // 初始化listView1. private void InitializeListView() { listView1.AllowDrop = ...
随机推荐
- ZOJ 3684 Destroy
Destroy Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on ZJU. Original ID: 36 ...
- poj 1659 判断是否能构成图Havel-Hakimi定理
//用到了Havel-Hakimi定理,判断是否能够构图 //两种情况不能构图,1:对剩下序列排序后,最大的度数超过了剩下的顶点数 // 2:对最大的度数后面的f个度数减-后,出现了负数 //记录到临 ...
- 中庸之道（codevs 2021）
题目描述 Description 给定一个长度为N的序列,有Q次询问,每次询问区间[L,R]的中位数. 数据保证序列中任意两个数不相同,且询问的所有区间长度为奇数. 输入描述 Input Descri ...
- JavaMelody开源系统性能监控
https://blog.csdn.net/itopme/article/details/8618067
- Swift具体解释之六----------------枚举、结构体、类
枚举.结构体.类 注:本文为作者自己总结.过于基础的就不再赘述 ,都是亲自測试的结果.如有错误或者遗漏的地方.欢迎指正,一起学习. 1.枚举 枚举是用来定义一组通用类型的一组相关值 ,关键字enum ...
- struct结构体在c和c++中的差别
非常多次遇到这个struct的问题,今天在这里简单总结一下我的理解 一.struct在C 中的使用 1.单独使用struct定义结构体类型 struct Student { int id; int n ...
- 6.6 random--伪随机数的生成
本模块提供了生成要求安全度不高的随机数.假设须要更高安全的随机数产生.须要使用os.urandom()或者SystmeRandom模块. random.seed(a=None, version=2) ...
- 使用VS2005安装和编译QT4.53源码
学习Qt,当然是QT4好.可是装了4.86以后,网上下载的书中的例子大多无法直接用VS执行(个人不喜欢用QT Creator),即打开pro转换的时候出错(我也懒的研究为什么出错了).看了一下发布时间 ...
- POJ 1056 IMMEDIATE DECODABILITY Trie 字符串前缀查找
POJ1056 给定若干个字符串的集合 判断每个集合中是否有某个字符串是其他某个字符串的前缀 (哈夫曼编码有这个要求) 简单的过一遍Trie就可以了 #include<iostream> ...
- RDA 升级
烧录BOOT升级方式: 1.连接 2.烧录BOOT 1)升级“bootrom_raw.bin” 99K,这种升级方式需要Tera Term 工具,按“F5” U盘升级. 编译的升级文件“RR8503 ...