jQuery UI Droppable 格式和定位显示不正确

Question

我在应该是一个简单的 jQuery-UI 可拖放/可排序列表时遇到问题。在源列表中，我有几个可拖动的 LI 元素，而我的目标列表使用最后一个子元素作为放置目标。

我有两个问题：

1) 即使我使用 insertBefore 最后一个子元素，它也是在之后插入的。

2) 放置目标格式在放置后表现异常。该块下降，就好像它在顶部有一个边距。它应该与新创建的列表元素保持一致。

Here is the fiddle 来演示问题。将列名从顶部列表拖到底部元素中的放置目标。为了将代码保留在问题中，这里是各个部分：

HTML：

<div id="report_builder">
<ul id="columns" class="column_list">
    <li  id="null"  rel="recid"  >Id
    </li>

    <li  id="null"  rel="street1"  >Address
    </li>

    <li  id="null"  rel="street2"  >Address 2
    </li>
</ul>
<br/><br/>
<ul id="report_layout_1" class="report_layout">
    <li>
    <span id="null_form" ><span  id="null"  >Drop Field Here</span></span>
    </li>
</ul>
</div>​

Javascript：

jQuery("ul.column_list > li").draggable({
    appendTo: "#report_layout_1",
    cursor: 'move',
    helper: "clone"
});

sortOptions = {
    placeholder: "ui-state-highlight",
    forcePlaceholderSize: true,
    axis: 'x',
    opacity: 0.8,
    items: "li:not(li:last-child)",
    cancel: "li:last-child, input, select"
};

dropOptions = {
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.report_layout > li)",
    drop: function( event, ui ) {                
        jQuery( this ).find( ".placeholder" ).remove();
        var tableColumn = ui.draggable.attr('rel');
        jQuery( "<li rel=\"" + tableColumn + "\"></li>" ).html( ui.draggable.text() + '<br/><input type="text" class="report-column-value"/><br/><br/>').insertBefore( jQuery("li:last-child", jQuery(this).parent()) );
    }
});        
jQuery(".report_layout > li:last-child").droppable(dropOptions);
jQuery( ".report_layout" ).sortable(sortOptions);

CSS：

#report_builder li {
    font-size: 8pt;
}

#report_builder > ul {
    border: 2px solid black;
    margin-left: 10px;
}

.droppable {
    margin: 0;
    vertical-align: top;
}

ul.column_list {
    width: 100px;
}

ul.column_list > li {
    padding: 5px;
    border: 1px solid #ccc;
    border-top: 10px solid #ccc;
    cursor: move;
}
.report_layout {
    height: 150px;
}
.report_layout > li {
    display: inline-block;
    padding: 5px;
    margin-left: 2px;
    border: 1px solid #ccc;
    border-top: 10px solid #ccc;
    height: 100px;
    background-color:#fff;
}
.report_layout > li:last {
    cursor: default;
}
.report_layout > li a {
    cursor: pointer;
}
.report_layout > li:nth-child(even) {
    background-color:#eee;
}

.report_layout .droppable {
    margin: 10;
}

#report_builder .ui-draggable-dragging {
    display: inline-block;
    padding: 5px;
    border: 1px solid #ccc;
    border-top: 10px solid #ccc;
    background-color: white;
    z-index: 21000;
}
#report_builder input.report-column-value {
    width: 95px;
}

​

Answer 1

您在您的可拖动对象中使用了appendTo: "#report_layout_1"，因此当拖动#report_layout_1 中的最后一个li 时，它是可拖动对象，它也等于您的.drop 函数中的jQuery("li:last-child", jQuery(this))。

希望这是有道理的。

所以最简单的解决方法是将可拖动对象附加到其他东西上；否则更改insertBefore 目标。

参见fiddle（如果你不指定appendTo，助手会被附加到可拖动对象的父级）