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>

 

转载于:https://www.cnblogs.com/yi-miao/p/9269776.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/452088.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分享11款主流的开源编程工具

导读&#xff1a;有了开源编程工具&#xff0c;在基于开源许可证的情况下您可以轻松学习、修改、提高代码的质量&#xff0c;本文收集了11款最主流的且有价值的开源编程工具。或许会给您带来一丝惊喜。一起来看下吧。 NO.1 Rhomobile Rhodes Ruby或许是Github上第二大流行语言…

谁在告谁?移动专利混战图

移动领域激战正酣&#xff0c;同样是没有永远的朋友&#xff0c;只有永远的利益。 苹果刚刚起诉三星的Galaxy手机和平板电脑山寨了苹果的产品&#xff0c;而此前两家并没有过节。再比如微软和亚马逊以及HTC之间的授权协议争端。移动领域的争端如此之多&#xff0c;以至于看客无…

光棍节程序员闯关秀过关全攻略

maven/java/web/bootstrapQQ群&#xff1a;566862629。希望更多人一起帮助我学习。 光棍节程序员闯关秀过关全攻略。程序员的寂寞谁能懂?"SF光棍节程序员闯关秀"智力挑战小游戏火热上线&#xff0c;看看你能闯到第几关&#xff1f; 游戏地址: http://segmentfault…

jekins搭建

2019独角兽企业重金招聘Python工程师标准>>> 转自 https://www.cnblogs.com/hdwang/p/6081994.html &#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xf…

块级元素的margin-left和margin-right的用法注意

此时是有效果显示的因为html文档流默认是从上往下&#xff0c;从左往右进行显示的&#xff0c;所以此时是有效果的。那如果此时把#son的块元素的margin-right:20px; 是没有效果的此时是没有效果的&#xff0c;如图所示&#xff1a;如果此时想要margin-right有效果的话&#xf…

Apache Tiles的基本使用

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1、概述 对于一个新的技术&#xff0c;了解其基本的概念和和原理是学好该技术的基础。 2、Tiles的概念 Tiles 是复合视图模式&#xff0…

网络爬虫--6.urllib库的基本使用(2)

文章目录一. urllib.parse.urlencode()和urllib.parse.unquote()二. Get方式三. 批量爬取百度贴吧数据四.POST方式五.关于CA六.处理HTTPS请求 SSL证书验证一. urllib.parse.urlencode()和urllib.parse.unquote() 编码工作使用urllib.parse的urlencode()函数&#xff0c;帮我们…

摩拜大数据杀熟?官方:老用户押金的确退款延迟

近日&#xff0c;有媒体曝出摩拜单车一些老用户出现押金难退现象。有的消费者点击退款后&#xff0c;系统不断奔溃&#xff1b;有的申请退款后&#xff0c;账户又莫名出现押金&#xff0c;就像未申请一样&#xff1b;也有人终于提交了退款&#xff0c;等候数日却迟迟不见到账。…

Junit Test使用样例

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 配置&#xff1a; 调用类&#xff1a; import java.util.List;import javax.annotation.Resource;import org.apache.shiro.crypto.Rand…

day212223:线程、进程、协程

1、程序工作原理 进程的限制&#xff1a;每一个时刻只能有一个线程来工作。多进程的优点&#xff1a;同时利用多个cpu&#xff0c;能够同时进行多个操作。缺点&#xff1a;对内存消耗比较高当进程数多于cpu数量的时候会导致不能被调用&#xff0c;进程不是越多越好&#xff0c;…

php课程 8-28 php如何绘制生成显示图片

php课程 8-28 php如何绘制生成显示图片 一、总结 一句话总结&#xff1a;gd库轻松解决 1、php图片操作生成的图的两种去向是什么&#xff1f; 一种在页面直接输出&#xff0c;一种存进本地磁盘 2、php操作图片的库有哪些&#xff1f; PHP: Image Processing and Generation - M…

flavr—超级漂亮的jQuery扁平弹出对话框

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 插件描述&#xff1a;flavr是一个时尚的扁平弹出对话框为您的下一个网站。 flavr是响应设计布局&#xff0c;能够适应任何屏幕大小。 得…

经纬度之间的距离计算

来自谷歌地图的计算公式&#xff1a; 通过JAVA的Math类各种方法调用。实现上述公式 private static double EARTH_RADIUS 6378.137;// 单位千米/*** 角度弧度计算公式 rad:(). <br/>* * 360度2π πMath.PI* * x度 x*π/360 弧度* * author chiwei* param d* return* s…

在CentOS7阿里云服务器部署ThinkPHP5,并配置phpstrom实现同步开发(微信小程序及管理员后端)...

小程序和后端同步开发 1.服务器安装tp5框架&#xff1a; 方法很多比如&#xff1a;github、linux命令直接手动下、composer 都可以&#xff0c;方法很多&#xff0c;百度一下&#xff0c;不再累述 2.这时你会发现怎么都访问出现不了这个令人舒心的界面&#xff08;ok第一个坑到…

ER图( 实体联系图)

E-R图也称实体-联系图(Entity Relationship Diagram)&#xff0c;提供了表示实体类型、属性和联系的方法&#xff0c;用来描述现实世界的概念模型。 它是描述现实世界概念结构模型的有效方法。是表示概念模型的一种方式&#xff0c;用矩形表示实体型&#xff0c;矩形框内写明…

网络爬虫--9.正则表达式

文章目录一. 正则表达式1.为什么要学正则表达式2.什么是正则表达式3.正则表达式匹配规则二. Python 的 re 模块1.re 模块的一般使用步骤2.compile 函数3.match 方法4.search 方法5.findall 方法6.finditer 方法7.split 方法8.sub 方法9.匹配中文10.贪婪模式与非贪婪模式1&#…

笔记本电池的正确使用方法

一、新买笔记本不需要激活&#xff0c;也不需要前三次的充电12小时深充深放&#xff0c;这主要是锂电池的原理和特性决定的。电池设计有电量保护&#xff0c;不可能将电量完全用完&#xff0c;当然也不可能过度充电。 二、笔记本电池的寿命受周围环境的影响很大&#xff0c;最好…

JQuery Datatables Dom 和 Language 参数详细说明

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Dom说明 定义表格控件在页面的显示顺序。 每个控件元素在数据表都有一个关联的单个字母。 l - 每页显示行数的控件f - 检索条件的控件…

Mac下的Jenkins安装

安装方式 1&#xff09;通过命令行安装 brew install jenkins&#xff0c;可能会遇到先更新 brew 的情况 https://brew.sh/index_zh-cn&#xff1b; 2&#xff09;通过 pkg 安装&#xff0c;官方网址&#xff1a;https://jenkins.io/ 安装完成后&#xff0c;会自动打开浏览器…

拼凑代码与编程

拼凑代码与编程&#xff08;Hacking Vs. Programming&#xff09;之间有什么不同&#xff1f;我听说过的一个观点是骇客可以在短时间内编许多代码&#xff0c;但是一旦发生变更&#xff0c;这些代码就要完全重写。而程序员也许会花更多的时间来编码&#xff0c;但发生变化的时候…