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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
绑定回车enter事件代码
May 18 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
用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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
php计算数组不为空元素个数的方法
2014/01/27 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
python3生成随机数实例
2014/10/20 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
python库matplotlib绘制坐标图
2019/10/18 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
50道外企软件测试面试题
2014/08/18 面试题
网站美工岗位职责
2014/04/02 职场文书
体操比赛口号
2014/06/10 职场文书
给老婆的检讨书
2015/01/27 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
中学语文教学反思
2016/02/16 职场文书
python - asyncio异步编程
2021/04/06 Python
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
MySQL七大JOIN的具体使用
2022/02/28 MySQL