Question

我有可拖放到容器中的可拖动元素。容器内是一个目标'p'，供用户放下元素。删除后，该元素将替换目标并动态创建新目标。这在第一次工作得很好，但后续的下降似乎并没有取代动态创建的目标。以下代码和jsfiddle。任何帮助都会非常感激，因为我觉得我很接近但只是遗漏了一些东西。

HTML

<div class="dragMe" data-value="one">Drag me!</div>
<div class="dragMe" id="two">Drag me!</div>
<div class="dragMe" id="three">Drag me!</div>
<div id="container"><p class="replaceText">Drag here</p></div>

CSS

#container {
border: solid black 1px;
height: 100px;
width: 100%;
display: flex;
flex-flow: row nowrap;
}

.replaceText {
    height: 96px;
    width: 96px;
    background-color: orange;
    margin: 1px;
    border: 1px solid blue;
}

.dragMe {
    color: white;
    background-color: #BADA55;
    width: 98px;
    margin: 2px;    
}

的jQuery

$('.dragMe').draggable({
    helper: 'clone',
    cursor: 'move',
});

$('#container').droppable({
   accept: '.dragMe',
   drop: handleDropEvent
});
function handleDropEvent (event, ui) {
    var draggable = ui.draggable;
    var newtarget = '<p class="replaceText">Drag here</p>';

    $('.replaceText').replaceWith(draggable);
    $('#container .dragMe').after(newtarget);
}

Answer 1

你应该替换

$('#container .dragMe').after(newtarget);

与

$('#container .dragMe').last().after(newtarget);

jsfiddle project here

jQuery拖放替换元素并动态创建droppable

1 个答案: