jquery draggable - 删除拖动元素

Posted 2023-05-08

【中文标题】jquery draggable - 删除拖动元素

【英文标题】：jquery dragable - remove element on drag

【发布时间】：2020-07-19 03:40:12

【问题描述】：

使用 jQuery-ui 我将可拖动元素拖放到可放置元素上。然后我将可放置元素变成可拖动元素。如果我然后拖动新的可拖动元素，我希望删除（删除）元素及其内容。我可以使可放置元素可拖动；但是有两个问题：

当我拖动可放置（现在可拖动）元素时，它不会删除。 被拖入可放置（现在可拖动）元素的原始元素可以单独拖动。

在此示例中，“4WD”被拖（克隆）到“活动”下方的可放置字段中。原始的“4WD”仍然可以拖动（根据需要）。克隆的“4WD”也是可拖动的（不需要）。 droppable 字段现在可以拖动了；但是，拖动时不会删除。

代码是：

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】：

我终于找到了改“$(ui.draggable).remove();”的答案到“$(this).remove();”

function makeDraggableRemove() 

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

尽管这会在右后方留下一条粗灰色垂直线。我也希望将其删除:-)