JQuery Сортируемый с динамическим DIV - PullRequest
Новая
       16

JQuery Сортируемый с динамическим DIV

1 голос
/ 24 мая 2019

У меня есть страница, которая реализует перетаскиваемый, сбрасываемый и сортируемый 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

1 Ответ

0 голосов
/ 03 июня 2019

Хотя это и не идеально, просто измените опцию метода JQuery Droppable - Tolerance со стандартного значения «Пересечь» на «Прикосновение». Это позволит вам увидеть эффект всякий раз, когда перетаскиваемый элемент перекрывает пометку при любом значении касания: 

$(".dropzone").droppable({
  // Change the tolerance to 'touch'
  tolerance: "touch",
  over: function(event, ui) {
    var ElementOver = $(event.target);
    var DraggedElement = $(ui.draggable);
    var IDofDraggedElement = DraggedElement.attr("id");

    console.log(IDofDraggedElement);

    //if (IDofDraggedElement.indexOf("imageicon") == 0) //MOVING A LINE
    ElementOver.css("background-color", "lightgray");
  },
  out: function(event, ui) {
    var ElementOver = $(event.target);

    ElementOver.css("background-color", "");
  },
  drop: function(event, ui) {
    var ElementOver = $(event.target);

    ElementOver.css("background-color", "");
  }
});


$("#lines").sortable({
  handle: '.iconmove',
  axis: 'y',
  tolerance: 'pointer',
  helper: 'clone'

});

Допуск у предмета сброса имеет четыре варианта:

"fit - Draggable полностью закрывает элемент сбрасывания.

пересечение - перетаскиваемый элемент перекрывает выпадающий элемент как минимум на 50% в обоих направлениях.

указатель - указатель мыши перекрывает сбрасываемый элемент.

Прикосновение - перетаскиваемый элемент перекрывает любое количество прикосновений. "

Цитата из https://www.tutorialspoint.com/jqueryui/jqueryui_droppable.htm

...