У меня есть страница, которая реализует перетаскиваемый, сбрасываемый и сортируемый jQuery. Он содержит строки div, кнопку «Добавить линию» и значок изображения, который можно перетащить в любую строку div, что приводит к отображению модального окна, позволяющего поместить изображение в строку. Все отлично работает ... кроме:
Я использую сортировку jQuery, чтобы перегруппировать строки. Когда происходит перетаскивание (ограничено осью Y), элемент div, над которым перетаскивается перетаскиваемый элемент div и помещается после него, окрашивается в серый цвет. Это прекрасно работает, за исключением случаев, когда в DIV есть изображения, в результате чего перетаскиваемый DIV имеет гораздо большую высоту, чем пустой div. Похоже, он не отслеживается должным образом, как показывает то, как ряды поворачиваются в серый цвет и из него.
Вот код JQuery:
$(".dropzone").droppable({
over: function(event,ui)
{
var ElementOver = $(event.target);
var DraggedElement = $(ui.draggable);
var IDofDraggedElement = DraggedElement.attr("id");
ElementOver.css("background-color","lightgray");
},
out: function(event,ui)
{
var ElementOver = $(event.target);
ElementOver.css("background-color","");
},
drop: function(event,ui)
{
DropObject(event,ui); //This handles Ajax activity
var ElementOver = $(event.target);
ElementOver.css("background-color","");
}
});
$("#lines").sortable({
handle: '.iconmove',
axis: 'y',
tolerance: 'pointer',
helper: 'clone'
});
и вот пример моего HTML:
<div id="linecontainer" class="w3-card-4 w3-padding">
<div id="lines">
<cfoutput query="qFormLines" group="formlineid">
<div class="w3-row w3-padding" style="width:80%" id="line#formlineid#">
<div class="w3-col w3-center l1 m1 s1">
<img id="moveicon#formlineid#" class="iconmove" src="_images/updown24.png" title="Move Line" >
</div>
<div class="dropzone w3-padding w3-col w3-border l11 m11 s11" id="zone#formlineid#" >
<cfoutput>
<cfif imagefile NEQ "">
<img id="formitem#formitemid#" class="w3-border" src="_images/#imagefile#" >
</cfif>
</cfoutput>
</div>
</div>
</cfoutput>
</div>
</div>
Вот скрипка, которую я создал, хотя она не совсем работает так же, как мой локальный исходный код:
Fiddle