使用拖放jQuery进行更改

Question

我目前正在使用jQuery进行拖放系统。我已经开始创建基础系统了。

我尝试使用函数append（）但它没有用。如果您有任何想法，谢谢。

当您选择更改的项目时，我希望如此。例如，如果我在删除文本时选择一个文本就会成为一个块。

这里是JSFiddle

HTML：

<div class="drag">
    <p>Block 1</p>
</div>
<div class="drag">
    <p>Block 2</p>
</div>

<section id="drop">Drop here</section>

的JavaScript

$(".drag").draggable({
    opacity: 0.7,
    snap: '#drop',
    snapTolerance: 10,
    cursor: "move",
    revert: "invalid",
    grid: [10, 10],
    helper: "clone"
});

$("#drop").droppable({
    hoverClass: "ui-state-active",
    drop: function(event, ui) {
        var currenOffset = ui.offset;
        var dropedObjectCss = {
            "position": "absolute",
            "left": currenOffset.left,
            "top": currenOffset.top
        }
        var tag=ui.draggable;
        if (tag.data('alreadydropped')) {
            var newItem = tag.css(dropedObjectCss).appendTo( this );
            newItem.resizable({
                containment: "#drop"
            }); 
            newItem.draggable({
                opacity: 0.7,
                snap: '#drop',
                snapTolerance: 10,
                cursor: "move",
                grid: [10, 10],
                revert: "invalid"
            });       
        } else {
            var newItem = tag.clone().css(dropedObjectCss).appendTo( this );  
            newItem.data('alreadydropped', true).resizable({
                containment: "#drop"
            });
            newItem.data('alreadydropped', true).draggable({
                opacity: 0.7,
                snap: '#drop',
                snapTolerance: 10,
                cursor: "move",
                grid: [10, 10],
                revert: "invalid"
            });       
        }
    }
});