简单的jquery拖拽排序效果实现代码


Posted in Javascript onSeptember 20, 2011

步骤:
1.实现随鼠标移动的效果;
2.初始化一个元素及其坐标;
3.拖拽对象的最后坐标,与元素的坐标 进行计算和判断 来确定 要插入的目标元素;
4.用insertBefore 方法 插入到目标元素的前面
具体代码如下:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>测试的拖拽功能</title> 
<style type="text/css"> 
body, div { margin: 0; paading: 0; font-size: 12px; } 
body { width: 960px; margin: 0 auto; } 
ul, li { margin: 0; padding: 0; list-style: none; } 
.clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; } 
.box { width: 600px; height: auto; margin: 25px 0 0 0; padding: 5px; border: 1px solid #f00; } 
.main { position: static; width: 600px; height: 80px; margin-bottom: 5px; border: 1px solid blue; background: #ccc; } 
.maindash { position: absolute; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed blue; background: #ececec; opacity: 0.7; } 
.hide { width: 600px; height: 80px; margin-bottom: 5px; } 
.dash { position: sta;tic; width: 600px; height: 80px; margin-bottom: 5px; border: 1px dashed #f00; }; 
</style> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready( function () { 
var range = { x: 0, y: 0 };//鼠标元素偏移量 
var lastPos = { x: 0, y: 0, x1: 0, y1: 0 }; //拖拽对象的四个坐标 
var tarPos = { x: 0, y: 0, x1: 0, y1: 0 }; //目标元素对象的坐标初始化 
var theDiv = null, move = false;//拖拽对象 拖拽状态 
var theDivId =0, theDivHeight = 0, theDivHalf = 0; tarFirstY = 0; //拖拽对象的索引、高度、的初始化。 
var tarDiv = null, tarFirst, tempDiv; //要插入的目标元素的对象, 临时的虚线对象 
$(".main").each(function(){ 
$(this).mousedown(function (event){ 
//拖拽对象 
theDiv = $(this); 
//鼠标元素相对偏移量 
range.x = event.pageX - theDiv.offset().left; 
range.y = event.pageY - theDiv.offset().top; 
theDivId = theDiv.index(); 
theDivHeight = theDiv.height(); 
theDivHalf = theDivHeight/2; 
move = true; 
theDiv.attr("class","maindash"); 
// 创建新元素 插入拖拽元素之前的位置(虚线框) 
$("<div class='dash'></div>").insertBefore(theDiv); 
}); 
}); 
$(document).mousemove(function(event) { 
if (!move) return false; 
lastPos.x = event.pageX - range.x; 
lastPos.y = event.pageY - range.y; 
lastPos.y1 = lastPos.y + theDivHeight; 
// 拖拽元素随鼠标移动 
theDiv.css({left: lastPos.x + 'px',top: lastPos.y + 'px'}); 
// 拖拽元素随鼠标移动 查找插入目标元素 
var $main = $('.main'); // 局部变量:按照重新排列过的顺序 再次获取 各个元素的坐标, 
tempDiv = $(".dash"); //获得临时 虚线框的对象 
$main.each(function () { 
tarDiv = $(this); 
tarPos.x = tarDiv.offset().left; 
tarPos.y = tarDiv.offset().top; 
tarPos.y1 = tarPos.y + tarDiv.height()/2; 
tarFirst = $main.eq(0); // 获得第一个元素 
tarFirstY = tarFirst.offset().top + theDivHalf ; // 第一个元素对象的中心纵坐标 
//拖拽对象 移动到第一个位置 
if (lastPos.y <= tarFirstY) { 
tempDiv.insertBefore(tarFirst); 
} 
//判断要插入目标元素的 坐标后, 直接插入 
if (lastPos.y >= tarPos.y - theDivHalf && lastPos.y1 >= tarPos.y1 ) { 
tempDiv.insertAfter(tarDiv); 
} 
}); 
}).mouseup(function(event) { 
theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上 
theDiv.attr("class", "main"); //恢复对象的初始样式 
tempDiv.remove(); // 删除新建的虚线div 
move=false; 
}); 
}); 
</script> 
</head> 
<body> 
<div class="box" id="box"> 
<div class="main" id="main0">div1</div> 
<div class="main" id="main1">div2</div> 
<div class="main" id="main2">div3</div> 
<div class="main" id="main3">div4</div> 
<div class="main" id="main4">div5</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
用jQuery中的ajax分页实现代码
Sep 20 #Javascript
jquery模拟按下回车实现代码
Sep 20 #Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 #Javascript
50个比较实用jQuery代码段
Sep 18 #Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 #Javascript
Jquery 表格合并的问题分享
Sep 17 #Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 #Javascript
You might like
PHP与javascript对多项选择的处理
2006/10/09 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
Python字符转换
2008/09/06 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Python判断有效的数独算法示例
2019/02/23 Python
django的ORM模型的实现原理
2019/03/04 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
植物选择:Botanic Choice
2017/02/15 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
心理健康教育心得体会
2013/12/29 职场文书
实验教师岗位职责
2014/02/13 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android