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

Jquery 多行拖拽图片排序 jq优化相关推荐

sortable vue 排序_VUE +element el-table运用sortable 拖拽table排序，实现行排序，列排序...
sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中的table进行拖拽行排序这里用到了sorttable sortable ...
html5图片拖拽删除,基于jquery插件实现拖拽删除图片功能
本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码,供大家参考,具体内容如下实现以下效果完全拖出这个层,图片会消失,否则图片会回到原来的位置 #mydiv{ width:900px ...
JS组件系列——Bootstrap Table 表格行拖拽
JS组件系列--Bootstrap Table 表格行拖拽原文:JS组件系列--Bootstrap Table 表格行拖拽前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...
JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...
html5拖拽图片批量ajax无刷新进度上传
1.前端拖拽图片之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...
vuedraggable嵌套块拖拽_Vue 基于 vuedraggable 实现选中、拖拽、排序效果
今天有个朋友说要做个效果:Vue实现拖拽排序,要有 checked,输出结果是排序后的,要全选,未选中的不能拖动. 其实我之前基于 Sortable 做过一个类似的效果.也给他看过了,没看太明白,他就 ...
html许愿墙源码,jQuery实现可拖拽的许愿墙效果
这篇文章主要介绍了jQuery实现可拖拽的许愿墙效果,可实现拖拽图片与层叠显示功能,涉及jQuery插件的简单使用,并附带demo源码供读者下载参考,需要的朋友可以参考下本文实例讲述了jQuery实 ...
解决Avue-crud行拖拽事件与鼠标选择复制冲突问题
表格行配置项 | Avue前端搬砖神器,让数据驱动视图,更加贴合企业开发https://avuejs.com/crud/crud-row.html#%E8%A1%8C%E6%8B%96%E6%8B%B ...
html手机模块化,jQuery 移动端拖拽（模块化开发，触摸事件，webpack）
通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...

Jquery 多行拖拽图片排序 jq优化

Jquery 多行拖拽图片排序 jq优化相关推荐

最新文章

热门文章