jquery dragable - удалить элемент при перетаскивании - PullRequest
Новая
       6

jquery dragable - удалить элемент при перетаскивании

0 голосов
/ 07 апреля 2020

Используя jQuery -ui, я перетаскиваю перетаскиваемый элемент на сбрасываемый элемент. Затем я превращаю выпадающий элемент в перетаскиваемый элемент. Если я перетаскиваю новый перетаскиваемый элемент, я хочу, чтобы элемент и его содержимое были удалены (удалены). Я могу сделать перетаскиваемый элемент перетаскиваемым; однако есть две проблемы:

  1. Когда я перетаскиваю элемент droppable (теперь перетаскиваемый), он не удаляется.
  2. Исходный элемент, который был перетащен в элемент droppable (теперь перетаскиваемый) может быть перетащен сам по себе.

enter image description here

В этом примере "4WD" был перетащен (клонирован) в поле для сбрасывания ниже "Активность" , Оригинальный «4WD» остается перетаскиваемым (по мере необходимости). Клонированный "4WD" также перетаскивается (не требуется). Пропускаемое поле теперь перетаскивается; однако, не удаляется при перетаскивании.

Код: 

function makeDraggable() {
    $('.dragabbleItem').draggable({
        stack: ".dragabbleItem",
        cursor: 'pointer',
        helper: 'clone',
    });
}

function makeDraggableRemove() {

    $('.dragabbleRemove').draggable({
        cursor: 'pointer',
        drag: function( event, ui ) {
            $(ui.draggable).remove();
        }
    });
}

function makeDroppable() {
    $('.droppableItem').droppable({
        hoverClass: 'hovered',
        drop: function( event, ui ) {
            var droppable = $(this);
            var draggable = ui.draggable;
            alert( 'The item with ID "' + draggable.attr('id') + '" was dropped onto me!' );
            // Move draggable into droppable
            var drag = $('.droppableItem').has(ui.draggable).length ? draggable : draggable.clone().draggable({
                revert: "invalid",
                stack: ".dragabbleItem",
                helper: 'clone'
              });
            drag.appendTo(droppable);
            droppable.css({top: '5px', left: '5px', background: '#B0C4DE'});
            droppable.droppable('disable');
            droppable.addClass("dragabbleRemove");
            makeDraggableRemove();
        } 
    });
}

1 Ответ

0 голосов
/ 08 апреля 2020

Я наконец нашел ответ, чтобы изменить "$ (ui.draggable) .remove ();" to "$ (this) .remove ();" 

function makeDraggableRemove() {

    $('.dragabbleRemove').draggable({
        cursor: 'pointer',
        drag: function( event, ui ) {
            $(this).remove();           
        }
    });
}

Хотя это оставляет толстую серую вертикальную линию справа позади. Я бы тоже хотел, чтобы это удалили: -)

...