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

实例如下：

<!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横向拖拽排序的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery利用sort对DOM元素进行排序操作

    jQuery利用sort对DOM元素进行排序操作

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来进行重新渲染列表到客户端,这样做未尝不可,但是在有些情况下,我们既不需要利用框架也不需要重新生成列表到客户端,明明可以在客户端进行,达到我们的目的,为何要再一次发送请求到服务器呢?下面我们来看看. 话题 我们首先看看在w3c中js的sort方法. <script type="text/java

  • jQuery拖动元素并对元素进行重新排序

    jQuery拖动元素并对元素进行重新排序

    本文实例讲述了jQuery拖动元素并对元素进行重新排序的实现方法,分享给大家供大家参考,具体实现内容如下 效果图: 具体内容如下: 从上图可以看出我们今天要实现的功能.当用户拖动一个图片时,就能改变图片的已有排序并更新表中的排列顺序.比如用户可以随意拖动我们网站中的布局,如谷歌iGoogle就已经实现了.这样便很好的提高了用户体验. 下边,我们一步一步来实现这个功能. <span id="show"> <div> <input id="check

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

    步骤: 1.实现随鼠标移动的效果: 2.初始化一个元素及其坐标: 3.拖拽对象的最后坐标,与元素的坐标 进行计算和判断 来确定 要插入的目标元素: 4.用insertBefore 方法 插入到目标元素的前面 具体代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

  • 基于jquery的表格排序

    很多高手也位jquery写了专门的排序库,因为自己也想尝试一下, 当然运行速度实在不能接受,但是我会慢慢的把他改进的. 注:这里只是拿出了一部分代码来,查看演示demo 文档载入后给'th'添加click事件. 1. $('th').click(function(){ var date1=(new Date()).getTime() var dataType=$(this).attr('dataType'); 找到点击对象的自定义属性dataType,当然这个不符合W3C的标准是无法通过检验的,

  • jQuery基于排序功能实现上移、下移的方法

    jQuery基于排序功能实现上移、下移的方法

    本文实例讲述了jQuery基于排序功能实现上移.下移的方法.分享给大家供大家参考,具体如下: 效果 思路, 跟相邻元素,互换sort. 前提是每一个元素都有自己的sort值,不为零. <tr id="{sh:$vo.id}"> <td> <span onclick="up(this);" class="glyphicon glyphicon-arrow-up text-danger up" style="c

  • 用jquery.sortElements实现table排序

    项目中要实现table排序的功能. 网上有很多解决方案,很多都基于jQuery. jquery.tablesorter,大小17KB,不过他的首页在ie10下兼容性有点问题. DataTables,大小75KB,功能强大,带分页,搜索等功能. 还有插件叫sortElements,很小巧,只有3KB,兼容性也不错,而且在Github上有818个星. 最后我选择用sortElements,实现很简单: 1. 引入jQuery 复制代码 代码如下: <script type="text/java

  • jQuery实现的简单排序功能示例【冒泡排序】

    本文实例讲述了jQuery实现的简单排序功能.分享给大家供大家参考,具体如下: 这里演示的冒泡排序, 通过不断的循环找出最小的值,放到新的数组中.每次循环后都将指针指向下一个元素.直到两层循环都结束. index.html: <html> <head> <title>Sort</title> <meta content="text/html" charset="utf-8"> <script type

  • jQuery表格排序组件-tablesorter使用示例

    jQuery表格排序组件-tablesorter使用示例

    一.引入文件 复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标,同时引入图片 --> <

  • Jquery实现上下移动和排序代码

    Jquery实现上下移动和排序代码

    提出问题: 下文为大家介绍下Jquery实现上下移动和排序,感兴趣的朋友可以了解一下. 解决问题 代码实现: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"

  • jquery对元素拖动排序示例

    完整代码:(aspx文件末尾有下载) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

  • JQuery+Ajax实现数据查询、排序和分页功能

    之前很少会用javascript去实现页功能主要怕麻烦,但了解JQuery后这种想法发生了变化:有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来,这样编写高重用性的脚本就更方便.下面就是介绍在学习JQuery过程中编写的基于Ajax的数据查询.排序和分页功能的复用脚本,只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能. 先看下实现功能的代码: /**应用脚本规则: 引用脚本: JQuery脚本和JQuery的form插件脚本 Form的ID: viewfor

  • jquery实现的鼠标拖动排序Li或Table

    1.前端页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

  • 基于JQuery的列表拖动排序实现代码

    要求 拖动排序,从名字就不难想像,就是按住一行数据拖到想要的排序位置,保存新的排序队列. 思路 首先给列表行建立锚点,绑定mousedown和mouseup事件,当鼠标移动到想要插入的位置时,将对象行移动到目标行,然后对其经过的所有行进行排序处理. 思路很简单,但这里面仍然有几个问题要注意 1.移动到什么位置可以视作要插入到目标行的位置.2.移动出了顶端和底端时,判断为第一和最后.3.向上移动和向下移动的处理 解决 关于事件 Javascript里鼠标按下和放开事件为onmousedown,on

随机推荐