jquery可拖放-拖放元素

Question

使用jQuery，我将拖放一个可拖的元素到可下垂的元素上。然后，我将可下垂的元素转换为可拖放的元素。如果然后拖动新的可拖动元素，则希望删除该元素及其内容(删除)。我可以使可下垂的元素可拖；但是，有两个问题：

1. 当我拖动可下垂(现在是可拖动)元素时，它不会删除。
2. 原始元素被拖到可下垂(现在是可拖动)元素中，可以自己拖动。

。

​

​

在这个例子中，"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();
        } 
    });
}

Answer 1

我终于找到了答案:将“$(ui.draggable).remove()”改为“$(This).remove()”；

function makeDraggableRemove() {

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

虽然这在右边留下了一条厚厚的灰色垂直线。我也希望把它去掉：)