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

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 拖放替换元素并动态创建可放置

jQuery drag and drop replace element and dynamically create droppable

jquery-ui-draggable

jquery-ui-droppable

replacewith