使用jQuery,我将拖放一个可拖的元素到可下垂的元素上。然后,我将可下垂的元素转换为可拖放的元素。如果然后拖动新的可拖动元素,则希望删除该元素及其内容(删除)。我可以使可下垂的元素可拖;但是,有两个问题:
。
在这个例子中,"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();
}
});
}
发布于 2020-04-07 17:07:38
我终于找到了答案:将“$(ui.draggable).remove()”改为“$(This).remove()”;
function makeDraggableRemove() {
$('.dragabbleRemove').draggable({
cursor: 'pointer',
drag: function( event, ui ) {
$(this).remove();
}
});
}
虽然这在右边留下了一条厚厚的灰色垂直线。我也希望把它去掉:)
https://stackoverflow.com/questions/61071687
复制相似问题