Создание динамических разрывов DIV JQuery-UI Droppable - PullRequest
Новая
       38

Создание динамических разрывов DIV JQuery-UI Droppable

0 голосов
/ 20 мая 2019

У меня есть перетаскиваемый элемент и div с двумя статическими зонами отбрасывания: 

<img id="dragimage"  src="_images/image.png"  >

<div class="lines">
    <div class="dropzone" style="height:100px;width:100px;border:1px solid black">this is a dropzone</div>
    <div class="dropzone" style="height:100px;width:100px;border:1px solid black">this is a dropzone</div>
</div>
<script>
    $(function  () {
        $("#dragimage").draggable();

        $(".dropzone").droppable({
            drop: function(event,ui){
                alert('dropped');
            }
    });
</script>

У меня есть кнопка, которая динамически добавляет дополнительные зоны сброса. Я добавляю класс "ui-droppable" к динамическим зонам удаления, поскольку вызов .droppable () автоматически добавляет этот класс к любым статическим элементам сброса. 

function AddLine()
{
    var linecount = $("#linecount").val();
    var linediv = $(".lines").html();

    linecount++;
    $("#linecount").val(linecount);
    linediv += '<div  class="dropzone ui-droppable " style="height:75px;width:100%;border:1px solid black">New Drop Zone ' + linecount + '</div>';
    $(".lines").html(linediv);
}

Когда я перетаскиваю перетаскиваемый элемент в одну из статических зон перетаскивания до добавления каких-либо динамических зон перетаскивания, я получаю предупреждение каждый раз без затруднений.

Когда я добавляю одну или несколько динамических зон перетаскивания, событие сброса никогда не запускается, даже для исходных статических зон перетаскивания.

Есть предложения?

1 Ответ

0 голосов
/ 20 мая 2019

Я понял это с помощью This

Выше приведенный выше метод AddLine: 

function AddLine()
{
    var linecount = $("#linecount").val();
    var linediv = $(".lines").html();

    linecount++;

    $("#linecount").val(linecount);

    var newline = $('<div  class="dropzone ui-droppable" class="ui-droppable" style="height:75px;width:100%;border:1px solid black">New Drop Zone ' + linecount + '</div>').appendTo(".lines");

    newline.droppable(      {
        drop: function(event,ui)
        {
            alert('dropped'+linecount);
        }
    });

}
...