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 = ...
随机推荐
- 【codeforces 709D】Recover the String
[题目链接]:http://codeforces.com/problemset/problem/709/D [题意] 给你一个序列; 给出01子列和10子列和00子列以及11子列的个数; 然后让你输出 ...
- 对jetbrains全系列可用例：IDEA、WebStorm、phpstorm、clion等----https://blog.csdn.net/u014044812/article/details/78727496
https://blog.csdn.net/u014044812/article/details/78727496 pyCharm最新2018激活码
- BNUOJ 23905 滑雪
滑雪 Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on UESTC. Original ID: 13096 ...
- nyoj 19 擅长排列的小明(深搜，next_permutation）
擅长排列的小明 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想 ...
- HDU - 3407 - String-Matching Automata
先上题目: String-Matching Automata Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- python——正则表达式的理解
概念:又称规则表达式,常用来检索.替换符合某个规则的文本. 理解:特殊字符--------->规则---------->过滤字符串 目的:1.匹配给定的字符串,2.从字符串中过滤出我们需要 ...
- 旅游电车(cogs 1175)
[问题描述] Henryy国正致力于首都的一个旅游电车建设工程.首都有N个旅游景区.Henryy国的电车永远只沿道路规定的方向行驶,为了不使投入使用的电车有可能无法回到它的起始站,Henryy希望知道 ...
- 使用ajax，后台传回的数据处理
使用ajax,后台传到前台的是json数据,但这只是一个字符串的形式,需要进行转换为对象 转换后再使用$.each()方法进行遍历 使用alert(typeof msg) ; 可以查看msg的类型 ...
- POJ 1475 推箱
推箱 时限:n.2000MS 内存限制:n.131072K 提交材料共计: 6600 接受: 2263 特别法官 描述 想象一下你站在一个二维迷宫里,由方形细胞组成,它们可能或可能不会充满 ...
- ms sql server 系统表详细说明
sysaltfiles 主数据库 保存数据库的文件 syscharsets 主数据库字符集与排序顺序 sysconfigures 主数据库 配置选项 syscurconfigs 主数据 ...