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 = ...
随机推荐
- rm -rf & node
rm -rf & node rm -rf $ rm -rf mydir https://www.computerhope.com/issues/ch000798.htm https://sta ...
- 消息传递(cogs 1001)
问题描述WZland开办了一个俱乐部(这里面可以干任何的事情),这引来了许多的人来加入.俱乐部的人数越来越多,关系也越来越复杂……俱乐部的人来自各个地方,为了增加友谊,俱乐部举行了一次晚会.晚会上又进 ...
- git巧妙命令行
git cherry-pick c7081607cfd1bfa99b6e6c70c208e71fbd8767ae
- 【整理】uclibc,eglibc,glibc之间的区别和联系
http://www.crifan.com/relation_between_uclibc_glibc_eglibc/ 1.Glibc glibc = GNU C Library 是GNU项(GNU ...
- 定义Portal显示规则
Defining Portal Display Rules Use You use the Portal Display Rules editor to create and edit rule co ...
- jq仿ps颜色拾取功能-js颜色拾取
1.效果展示 2.html代码:index.html <!DOCTYPE html> <html lang="en"> <head> <m ...
- BC - Zball in Tina Town (质数 + 找规律)
Zball in Tina Town Accepts: 541 Submissions: 2463 Time Limit: 3000/1500 MS (Java/Others) Memory ...
- Android离线语音识别（PocketSphinx）
近期做项目.用到离线语音识别.整了好久,查了好多方法.最终完毕.网上资料有点乱,并且大部分就是那几个人写的.一群人转!以下我总结一下.也为后来人行个方便. 关于环境配置我就不多说了.我就是依照这个教程 ...
- 调用线程必须为 STA,因为许多 UI 组件都需要
WPF中,代码中准备控制控件内容时,有时会报错: 调用线程必须为 STA,因为许多 UI 组件都需要 我知道,在winform下面,使用多线程时,控件的值读取是可以的,但如果要更改,那么就必须进行一些 ...
- timus 1018. Binary Apple Tree
1018. Binary Apple Tree Time limit: 1.0 secondMemory limit: 64 MB Let's imagine how apple tree looks ...