动态设置appendTo目标

Question

这是我的fiddle。

在jqueryUI可拖动属性中，如何根据我删除我的元素的哪个元素动态设置appendTo目标？

HTML：

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
<div id="assets">
     <h4>Drag these to the red box</h4>

    <div class="asset">A1</div>
    <div class="asset">A2</div>
    <div class="asset">A3</div>
    <div class="asset">A4</div>
</div>

CSS：

#header, #content, #footer {
    height: 150px;
    width: 50%;
    border: 1px solid red;
    position: relative;
    float: left;
    margin: 20px;
}
#assets {
    position: fixed;
    top: 0;
    right: 0;
}
.asset {
    border: 1px solid blue;
    width: 50px;
    height: 50px;
}
.drop {
    background-color: pink;
}

的JavaScript：

$('.asset').draggable({
    /*If we change appendTo to our #target dropzone, it works fine*/
    appendTo: 'body', //Try it with either #header, #content, #footer
    helper: 'clone'
});
$("#header, #content, #footer").droppable({
    hoverClass: "drop",
    drop: function (event, ui) {
        console.log('dropped');
        var element = $('<div class="asset">' + ui.draggable.text() + '</div>');
        element.css('top', ui.position.top);
        element.css('left', ui.position.left);
        element.css('position', 'absolute');
        $(element).appendTo(this);
    }
});

Answer 1

请注意，元素位于右侧div中。问题是这几行：

    element.css('top', ui.position.top);
    element.css('left', ui.position.left);
    element.css('position', 'absolute');

如果你删除它们，你甚至可以看到元素放在你丢弃它们的div中。但是，你可以这样写：

    element.css('top', ui.position.top - $(this).position().top - 21); // 20px margin + 1px border
    element.css('left', ui.position.left - $(this).position().left - 21);
    element.css('position', 'absolute');

它会起作用。 ：）