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 = ...
随机推荐
- spring历史地址
http://repo.spring.io/release/org/springframework/spring/
- C. Painting Fence 分治
memory limit per test 512 megabytes input standard input output standard output Bizon the Champion i ...
- Portal嵌入SAPUI5应用程序
Embedding SAPUI5 Applications You can embed SAPUI5 applications directly into the SAP Fiori launchpa ...
- Maticsoft Code Generator
源码:https://github.com/easonjim/MaticsoftCodeGenerator bug提交:https://github.com/easonjim/MaticsoftCod ...
- ngTbale真分页实现排序、搜索等功能
一. 真分页表格基础 1. 需求:分页,排序,搜索都是需要发API到服务端. 2. JS实现代码: getStorage是localStorage一个工具方法,可以自己写这个方法. API参数如下: ...
- 条款31: 千万不要返回局部对象的引用，也不要返回函数内部用new初始化的指针的引用
先看第一种情况:返回一个局部对象的引用.它的问题在于,局部对象 ----- 顾名思义 ---- 仅仅是局部的.也就是说,局部对象是在被定义时创建,在离开生命空间时被销毁的.所谓生命空间,是指它们所在的 ...
- AE 创建
using System; using System.Drawing; using System.Runtime.InteropServices; using ESRI.ArcGIS.ADF; usi ...
- 用XMLRPC开服务进行server/client通信
本文讲一下怎样用python的xmlrpc开服务,进行server/client的通信. 应用场景:1)需多client訪问应用程序给予应答情况--网页服务. 2)数据极大,希望载入一次.后面仅仅用 ...
- iOS常用的正则表达式总结
/* 正则表达式说明: . 匹配除换行符以外的任意字符 \\w 匹配字母或数字或下划线或汉字 \\s 匹配任意的空白符 \\d 匹配数字 \\b 匹配单词的开始或结束 ^ 匹配字符串的开始 $ 匹配字 ...
- C#之快速排序
算法描述 1.假定数组首位元素为“枢轴”,设定数列首位(begin)与末位(end)索引: 2.由末位索引对应元素与“枢轴”进行比较,如果末位索引对应元素大于“枢轴”元素,对末位索引减一(end--) ...