jQuery实现div横向拖拽排序的简单实例


Posted in Javascript onJuly 13, 2016

实例如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>div横向拖拽排序</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
body,div{
padding: 0px;
margin: 0px;
}

.box {
margin-left: 15px;
padding : 10px;
padding-right: 0px;
width : 810px;
height : 150px;
border : blue solid 1px;
}

.horizontal-div{
float : left;
margin-right: 10px;
border: #000 solid 1px;
text-align: center;
width : 150px;
height : 150px;
}

.horizontal-div-dash { 
position: absolute; 
width: 150px; 
height: 150px; 
margin-right: 10px; 
border: 1px dashed blue; 
background: #ececec; 
opacity: 0.7; 
} 

.dash { 
float : left; 
width: 150px; 
height: 150px; 
margin-right: 10px; 
border: 1px dashed #f00; 
}; 
</style>

<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; choose = false; //拖拽对象 拖拽状态 选中状态
var theDivId =0, theDivHeight = 0, theDivHalf = 0; tarFirstY = 0; //拖拽对象的索引、高度、的初始化。 
var tarDiv = null, tarFirst, tempDiv; //要插入的目标元素的对象, 临时的虚线对象 
var initPos = {x: 0, y: 0};
$(".horizontal-div").each(function(){ 
  $(this).mousedown(function (event){ 
choose = true;
  //拖拽对象 
  theDiv = $(this); 
  //记录拖拽元素初始位置
  initPos.x = theDiv.offset().left;
  initPos.y = theDiv.offset().top;
  //鼠标元素相对偏移量 
  range.x = event.pageX - theDiv.offset().left; 
  range.y = event.pageY - theDiv.offset().top; 
  theDivId = theDiv.index(); 
  theDivWidth = theDiv.width(); 
  theDivHalf = theDivWidth/2; 
  theDiv.attr("class","horizontal-div-dash"); 
  theDiv.css({left: initPos.x + 'px',top: initPos.y + 'px'}); 
   // 创建新元素 插入拖拽元素之前的位置(虚线框) 
  $("<div class='dash'></div>").insertBefore(theDiv); 
  tempDiv = $(".dash");
  });
    });


$(document).mouseup(function(event) { 
if(!choose){return false;}
  if(!move){
  theDiv.attr("class", "horizontal-div");
  tempDiv.remove(); // 删除新建的虚线div
  choose = false;
   return false;
  }
theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上 
theDiv.attr("class", "horizontal-div"); //恢复对象的初始样式 
tempDiv.remove(); // 删除新建的虚线div 
move = false;
choose = false;
  }).mousemove(function(event) { 
  if(!choose) return false;
  move = true;
lastPos.x = event.pageX - range.x; 
lastPos.y = event.pageY - range.y; 
lastPos.x1 = lastPos.x + theDivWidth; 
// 拖拽元素随鼠标移动 
theDiv.css({left: lastPos.x + 'px',top: lastPos.y + 'px'}); 
// 拖拽元素随鼠标移动 查找插入目标元素 
var $main = $('.horizontal-div'); // 局部变量:按照重新排列过的顺序 再次获取 各个元素的坐标, 
$main.each(function () { 
  tarDiv = $(this); 
  tarPos.x = tarDiv.offset().left; 
  tarPos.y = tarDiv.offset().top; 
  tarPos.x1 = tarPos.x + tarDiv.width()/2; 
  tarFirst = $main.eq(0); // 获得第一个元素 
  tarFirstX = tarFirst.offset().left + theDivHalf ; // 第一个元素对象的中心纵坐标 
  //拖拽对象 移动到第一个位置 
  if (lastPos.x <= tarFirstX) { 
  tempDiv.insertBefore(tarFirst); 
  } 
  //判断要插入目标元素的 坐标后, 直接插入 
  if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1 ) { 
  tempDiv.insertAfter(tarDiv); 
  } 
  }); 
  });


  });
</script>
</head>
<body>
<h1>div横向拖拽排序</h1>
<div class="box">
<div class="horizontal-div" id="div1">div1</div>
<div class="horizontal-div" id="div2">div2</div>
<div class="horizontal-div" id="div3">div3</div>
<div class="horizontal-div" id="div4">div4</div>
<div class="horizontal-div" id="div5">div5</div>
 </div>
</body>
</html>

以上这篇jQuery实现div横向拖拽排序的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 模拟用户单击事件
Dec 31 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
如何编写高质量JS代码
Dec 28 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 #Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 #Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 #Javascript
javascript类型系统——undefined和null全面了解
Jul 13 #Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 #Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 #Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 #Javascript
You might like
生成卡号php代码
2008/04/09 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
div层的移动及性能优化
2010/11/16 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
jqTransform美化表单
2015/10/10 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
python导入坐标点的具体操作
2019/05/10 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
大学生关于奋斗的演讲稿
2014/01/09 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
运动会广播稿200字
2014/10/18 职场文书
学生检讨书范文
2014/10/30 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
利用Python实现Picgo图床工具
2021/11/23 Python
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL