жадный дескриптор пользовательского интерфейса jQuery не работает должным образом - PullRequest
Новая
       8

жадный дескриптор пользовательского интерфейса jQuery не работает должным образом

0 голосов
/ 18 мая 2018

У меня есть список перетаскиваемых объектов, которые можно отбросить внутри элемента перетаскивания, и когда это происходит, перетаскиваемые объекты клонируются и преобразуются в элементы сброса.запускаются события (событие удаления из перетаскиваемого объекта и событие удаления из области сбрасывания)

Что я делаю не так?Мне нужно, чтобы событие сработало только один раз (из нового сбрасываемого предмета)

Вот скрипка : перетащите элемент в красную область, затем перетащите другой элемент и поместите его в элементты уже уронилСм. Журнал консоли.

HTML 

<div id="main_droppable"></div>

<ul>
  <li class="item" data-id="1">1</li>
  <li class="item" data-id="2">2</li>
  <li class="item" data-id="3">3</li>
  <li class="item" data-id="4">4</li>
  <li class="item" data-id="5">5</li>
</ul>

JS 

$(".item").data("active", false);

$(".item").draggable({
    helper: "clone",
    appendTo: "#main_droppable",
    scroll: false,
    start: function(event, ui)
    {
        if($(this).data("active") == false)
        {
            $(this).fadeTo(100, 0.2);
        }
        else
        {
            return false;
        }
    },
    revert: function(is_valid_drop)
    {
        if(!is_valid_drop)
        {
            $(this).fadeTo(100, 1).data("active", false);

            return true;
        }
        else
        {
            $(this).data("active", true);
        }
    }
});

$("#main_droppable").droppable({
    drop: function(event, ui)
    {
        console.log("drop main");

        addNewItem(ui.helper);

        return false;
    }
});

function addNewItem($oldItem)
{
    var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true);

    $oldItem.remove();

    $newItem.draggable({
        containment: "parent",
    });

    $newItem.droppable({
        greedy: true,
        drop: function(event, ui)
        {
            console.log("drop item");

            $(this).fadeTo(100, 0, function()
            {
                var $originalItem = $("ul").find(".item[data-id=" + $(this).data("id") + "]");

                $originalItem.fadeTo(100, 1).data("active", false);

                $("#main_droppable").find(".item[data-id=" + $originalItem.data("id") + "]").remove();
            });

            addNewItem(ui.helper);
        }
    });

  $("#main_droppable").append($newItem);
}

CSS 

#main_droppable
{
  border: 1px solid red;
  min-height: 50px;
}

.item
{
  display: inline-block;
  border: 1px solid blue;
  width: 25px;
  height: 25px;
}

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Ну ... это было связано с определенным классом ...

Когда я бросил перетаскиваемый объект и клонировал его, класс ui-draggable-dragging остался на месте.Поэтому, чтобы заставить его работать, мне пришлось удалить его, затем все заработало, как и ожидалось.

Я изменяю эту строку: 

var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true);

На эту: 

var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true).removeClass("ui-draggable-dragging");

обновленная скрипка: https://jsfiddle.net/3118zjg1/1/

0 голосов
/ 22 мая 2018

Я думаю, что перетаскиваемые объекты на самом деле становятся жадными, но событие #main_droppable все еще срабатывает, потому что:

Когда вы помещаете другой элемент .item поверх другого, предполагаемое действие для сбрасывания .item всрабатывает другой .item. 

    $newItem.droppable({
            greedy: true,
            drop: function(event, ui)
            {
                console.log("drop item");
                ...

но этот оригинальный элемент все равно удаляется дальше по коду .. 

    $(this).fadeTo(100, 0, function()
       {
        var $originalItem = $("ul").find(".item[data-id=" + $(this).data("id") + "]");

        $originalItem.fadeTo(100, 1).data("active", false);

        $("#main_droppable").find(".item[data-id=" + $originalItem.data("id") + "]").remove();
        ...

Вы фактически заменяете исходный элемент новымследовательно, срабатывает событие #main_droppable.

Не могу сказать, что знаю, как устранить непреднамеренный побочный эффект, не меняя предполагаемого поведения, но, надеюсь, у вас есть лучшее представление о том, почему атрибут greedyкажется, не работает.

...