Question

我讨厌插件，所以我找到了一种只使用jquery拖动和排序html元素的方法....

它的工作方式是我有四个div绝对定位在相对定位的div内。当你输入四个div中的一个时，代码获得div的位置并将其保存在两个全局变量上。代码将文档绑定到mousemove事件并获取鼠标光标的位置。当您将鼠标移动到鼠标光标位置时，使用css（）方法将鼠标光标分配给div（鼠标左键光标坐标减去div宽度的一半，顶部鼠标光标corrdinate减去div高度的一半）。如果div的右边缘或左边缘移出容器div的边界，则使用css（）方法将div恢复到其旧位置。当您对div进行鼠标处理时，代码获取div的新坐标并循环遍历其他div的坐标，并确定哪个div最靠近位置（div的顶部坐标距当前div最多50px＆＃ 39;当前顶部坐标和左坐标距当前div的当前左坐标最多也是50px。然后代码将鼠标从文档中取消绑定，并将最近的div的位置与刚刚获得鼠标的div的最旧位置交换。

我的HTML代码：

    <div style="position: relative; width: 800px; height: 500px; overflow: hidden; border: 1px solid red;">



<div class="draggable"  id="div1" style=" position: absolute; width: 300px; height: 150px; margin: 1px 2px; top: 0px; left: 0px; border: 1px solid red;"  >

<table border="1" width="250" height="140" align="center" style=""><tbody>
<tr><td width="" height="" align="center" valign="center">

1

</td></tr>
<tr><td width="" height="20" align="center" valign="top" colspan="" style="">   


</td></tr></tbody></table>

</div>

<div class="draggable"  id="div2" style=" position: absolute; width: 300px; height: 150px; margin: 1px 2px; top: 0px; left: 400px; border: 1px solid red;"  >

<table border="1" width="250" height="140" align="center" style=""><tbody>
<tr><td width="" height="" align="center" valign="center">

2

</td></tr>
<tr><td width="" height="20" align="center" valign="top" colspan="" style="">   


</td></tr></tbody></table>

</div>


<div class="draggable" id="div3" style=" position: absolute; width: 300px; height: 150px; margin: 1px 2px; top: 200px; left: 0px; border: 1px solid red;"  >

<table border="1" width="250" height="140" align="center" style=""><tbody>
<tr><td width="" height="" align="center" valign="center">

3

</td></tr>
<tr><td width="" height="20" align="center" valign="top" colspan="" style="">   


</td></tr></tbody></table>

</div>


<div class="draggable"  id="div4" style=" position: absolute; width: 300px; height: 150px; margin: 1px 2px; top: 200px; left: 400px; border: 1px solid red;"  >

<table border="1" width="250" height="140" align="center" style=""><tbody>
<tr><td width="" height="" align="center" valign="center">

4

</td></tr>
<tr><td width="" height="20" align="center" valign="top" colspan="" style="">   


</td></tr></tbody></table>



</div>




</div>

我的jquery代码：

$(document).ready(function(){ 


$(".draggable").mousedown(function(){

dragging = $(this).prop("id");
oldTop = $(this).position().top; 
oldLeft = $(this).position().left;

$("#"+dragging).css("cursor", "move");

$(document).mousemove(function(event){

var top = event.pageY - ($("#"+dragging).height()/2); 
var left = event.pageX - ($("#"+dragging).width()/2); 
var bottom = event.pageY + ($("#"+dragging).height()/2); 
var right = event.pageX + ($("#"+dragging).width()/2);

if(top > 0 && left > 0 && bottom < 500 && right < 800){ 

 $("#"+dragging).css( "left", left+"px").css("top", top+"px");

}else{

$("#"+dragging).css("cursor", "normal").css( "left", oldLeft+"px").css("top", oldTop+"px");

$(document).unbind("mousemove");

}

});




}).mouseup(function(){

newLeft = $(this).position().left;  
newTop = $(this).position().top;
var i = 0;

$(document).unbind("mousemove");

$(".draggable").not($(this)).each(function(){

var posLeft = $(this).position().left; 
var posTop = $(this).position().top;

var topDiff = Math.abs(posTop - newTop); 
var leftDiff = Math.abs(posLeft - newLeft); 



if(leftDiff <= 50 && topDiff <= 50){ 

$("#"+dragging).css("cursor", "normal").css( "left", posLeft+"px").css("top", posTop+"px");

$(this).css("left", oldLeft+"px").css("top", oldTop+"px");

i++;

}

}); 


if(i == 0){  

$("#"+dragging).css("cursor", "normal").css( "left", oldLeft+"px").css("top", oldTop+"px"); 

}

});



});

代码工作正常。只有它出乎意料的是div1不能被拖动以与任何其他div一起排序，div2只能被拖动以便用div1进行排序，div3可以被拖动以仅使用div1和div2进行排序，并且div4可以被拖动用于与任何div进行排序。代码应该工作，以便可以拖动任何div以与其余的div进行排序。

相反，如果你拖动div1并将其定位在div2或div3或div4上方（位置div1使其顶部坐标距离div2顶部坐标最多50px，div1左坐标距离div2左坐标最多50px）它会恢复到原来的位置，即使我的代码没有指定应该发生的情况。这两个div应该交换位置。将div2拖动到div3或div4以及将div3拖动到div4时会发生同样的事情。我不知道为什么会这样。我认为这与我在jquery代码末尾附近的foreach有关。我真的不知道。如果有人知道如何改进这些代码，我将非常感激。

我希望能够进一步处理代码的是：

拖动任何div以与其他任何div进行排序。
如果可以使用相对定位的div1，div2，div3和div4，并且仍然可以拖动任何div以便与任何其他div进行排序。

我也不是很好用javascript。所以javascript越少越好。

谢谢。

Answer 1

我知道你提到你讨厌插件。你还提到你使用jQuery。

出于好奇，为什么不使用jQueryUI？它具有draggable，droppable和sortable功能。在StackOverflow上，您将有100个问题已经为您解答。

IMO，你要做的就是重新发明轮子。

Answer 2

我得到的代码完全符合我的要求。最重要的是，它不需要绝对定位。它使用元素的静态定位，这是完美的。

一切正常但发生意外的事情是，最初，光标在div上垂直居中但不是水平或沿着div的宽度拖动它，尽管它应该是。通过做一些意外的事情来修复请参阅有关jquery代码的注释。

html改变了：

<table id="container" border="0" width="800" height="500" align="center" style="position: relative; border: 1px solid red;"><tbody>
<tr><td width="" height="" align="center" valign="center">


    <div class="draggable"  id="div1" style="width: 200px; height: 100px; margin: 1px 2px; border: 1px solid red; display: inline-block;"  >

        <table border="1" width="100%" height="100%" align="center" style=""><tbody>
        <tr><td width="" height="" align="center" valign="center">

        1

        </td></tr>
        <tr><td width="" height="20" align="center" valign="top" colspan="" style="">   


        </td></tr></tbody></table>

    </div>

    <div class="draggable"  id="div2" style="width: 200px; height: 100px; margin: 1px 2px; border: 1px solid red; display: inline-block;"  >

        <table border="1" width="100%" height="100%" align="center" style=""><tbody>
        <tr><td width="" height="" align="center" valign="center">

        2

        </td></tr>
        <tr><td width="" height="20" align="center" valign="top" colspan="" style="">   

        </td></tr></tbody></table>

    </div>


    <div class="draggable" id="div3" style="width: 200px; height: 100px; margin: 1px 2px; border: 1px solid red; display: inline-block"  >

        <table border="1" width="100%" height="100%" align="center" style=""><tbody>
        <tr><td width="" height="" align="center" valign="center">

        3

        </td></tr>
        <tr><td width="" height="20" align="center" valign="top" colspan="" style="">   

        </td></tr></tbody></table>

    </div>


    <div class="draggable"  id="div4" style="width: 200px; height: 100px; margin: 1px 2px; border: 1px solid red; display: inline-block;"  >

        <table border="1" width="100%" height="100%" align="center" style=""><tbody>
        <tr><td width="" height="" align="center" valign="center">

        4

        </td></tr>
        <tr><td width="" height="20" align="center" valign="top" colspan="" style="">   

        </td></tr></tbody></table>

    </div>


    <div class="draggable"  id="div5" style="width: 200px; height: 100px; margin: 1px 2px; border: 1px solid red; display: inline-block;"  >

        <table border="1" width="100%" height="100%" align="center" style=""><tbody>
        <tr><td width="" height="" align="center" valign="center">

        5

        </td></tr>
        <tr><td width="" height="20" align="center" valign="top" colspan="" style="">   

        </td></tr></tbody></table>

    </div>

    <div class="draggable"  id="div6" style="width: 200px; height: 100px; margin: 1px 2px; border: 1px solid red; display: inline-block;"  >

        <table border="1" width="100%" height="100%" align="center" style=""><tbody>
        <tr><td width="" height="" align="center" valign="center">

        6

        </td></tr>
        <tr><td width="" height="20" align="center" valign="top" colspan="" style="">   

        </td></tr></tbody></table>

    </div>

    <div class="draggable"  id="div7" style="width: 200px; height: 100px; margin: 1px 2px; border: 1px solid red; display: inline-block;"  >

        <table border="1" width="100%" height="100%" align="center" style=""><tbody>
        <tr><td width="" height="" align="center" valign="center">

        7

        </td></tr>
        <tr><td width="" height="20" align="center" valign="top" colspan="" style="">   

        </td></tr></tbody></table>

    </div>



</td></tr></tbody></table>

Jquery代码：

$(document).ready(function(){ 


    $(document).on("mousedown", ".draggable", function(){

        sortable = $(this);
        sortableDomPos = sortable.index();
        sortable.fadeTo(1, 0);
        oldLeft = sortable.position().left; oldTop = sortable.position().top;

        dragging = $(this).clone();
        dragging.css("position", "absolute").css("left", oldLeft+"px").css("top", oldTop+"px").css("pointer-events", "none").appendTo("#container");


        $(document).mousemove(function(event){

            var top = event.pageY - ($(dragging).height()/2); 
            var left = event.pageX - ($(dragging).width()); // ** should be ** var left = event.pageX - ($(dragging).width()/2);
            var bottom = event.pageY + ($(dragging).height()/2); 
            var right = event.pageX + ($(dragging).width()/2);

            if(top > 0 && left > 0 && bottom < 500 && right < 900){ 
                $(dragging).css( "left", left+"px").css("top", top+"px");
            }else{
                $(document).unbind("mousemove"); $(dragging).remove(); sortable.fadeTo(1, 1);
            }

        });



    });


    $(document).on("mouseup", ".draggable, #container", function(){

        $(document).unbind("mousemove"); $(dragging).remove();  sortable.fadeTo(1, 1);

        if($(this).prop("class") == "draggable"){

            var thisDomPos = $(this).index();

            if(sortableDomPos >= thisDomPos){
                sortable.insertAfter($(this)); $(this).insertAfter($(".draggable").eq(sortableDomPos));
            }
            else{
                sortable.insertBefore($(this)); $(this).insertBefore($(".draggable").eq(sortableDomPos));
            }

        }

    });


});

jquery draggable和sortable no plugin

2 个答案: