1
2
3
4
5
6
7
8
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

div横向拖拽排序

  
div1
  
div2
  
div3
  
div4
  
div5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(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();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX