Question

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

我遇到两个问题：

1）即使我在最后一个孩子之前使用insertBe，它也会插入。

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"，因此当拖动li中的最后一个#report_layout_1是可拖动帮助程序时，它也等于您{{1}中的jQuery("li:last-child", jQuery(this))功能。

希望这是有道理的。

所以最简单的解决办法就是将可拖动的东西附加到其他东西上;否则更改.drop目标。

请参阅fiddle（如果未指定insertBefore，则帮助程序会附加到可拖动的父级）

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

1 个答案: