Я ненавижу плагин, так что я нашел способ перетащить и сортировки HTML элементов, используя только JQuery ....JQuery перетаскивание и сортировка не плагин
Как это работает в том, что у меня есть четыре дивов абсолютно позиционированы внутри относительно позиционированного дела. Когда вы mousedown один из четырех divs, код получает положение div и сохраняет его на двух глобальных переменных. Код привязывает документ к событию mousemove и получает позицию курсора мыши. Когда вы перемещаете мышь вокруг позиции курсора мыши, ей присваивается div с помощью метода css() (координата левого указателя мыши минус половина ширины div и верхнего указателя мыши corrdinate минус половина высоты div). Если правый край или левый край div перемещается за пределы контейнера div, div возвращается в прежнее положение с помощью метода css(). Когда вы наводите мышью на div, код получает новые координаты div и петли через другие divs для своих координат и определяет, какой div ближе всего по положению (какая верхняя координата div находится на расстоянии не более 50px от текущей верхней координаты текущего div и слева координата также не более 50px от текущей левой левой координаты div). Затем код отсоединяет mousemove от документа и свопирует позицию ближайшего 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 так, чтобы его верхняя координата не превышала 50px от верхней координаты div2, а div1 в левой координате не более 50px вдали от div2 левой координаты), он просто вернется к своей старой позиции, хотя мой код не указывает, что это должно произойти. Два div должны вместо этого менять позиции. То же самое происходит при перетаскивании div2 в div3 или div4 и при перетаскивании div3 в div4. Я не знаю, почему это происходит. Я думаю, что это связано с тем, что у меня есть конец кода jquery. Я действительно не знаю. Если кто-то знает, как улучшить этот код, я бы очень признателен.
То, что я надеюсь, чтобы иметь возможность дальше делать с кодом является:
перетащить любой DIV для сортировки с любым из остальных див.
, если можно использовать относительно позиционированные div1, div2, div3 и div4 и по-прежнему иметь возможность перетаскивать любой div для сортировки с любым другим div.
Также я не очень хорошо разбираюсь в javascript. Так что чем меньше javascript, тем лучше.
Thank you.
Пожалуйста, отступов код в организованном порядке. Это чудеса для понимания. – brasofilo