jQuery UIドロップ可能な書式設定と位置付けが正しく表示されない

Question

単純なjQuery-UIのドロップ可能/ソート可能なリストに何か問題があります。ソースリストにはいくつかのドラッグ可能なLI要素があり、宛先リストには最後の子がドロップターゲットとして使用されます。

1）私はのinsertBeforeそれが後に挿入され、最後に使用していた子もかかわら：

は、私は2つの問題を抱えています。

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

あなたは01を使用していますはドラッグ可能なので、最後のliを#report_layout_1にドラッグすると、ファンクションのjQuery("li:last-child", jQuery(this))と同じくドラッグ可能なヘルパーになります。

希望はこれが理にかなっています。

したがって、最も簡単な修正は、ドラッグ可能なものを別のものに追加することです。それ以外の場合はinsertBeforeターゲットを変更します。

は、部品＃1を答えて[OK]をfiddle（あなたがappendToを指定しない場合は、ヘルパーがドラッグ可能の親に付加されます）