1
テーブルセル形式のDIVで2つのULを上に並べるにはどうしたらいいですか？
jQuery(function() {
jQuery(".collection").sortable({});
jQuery('li', jQuery('.collection')).draggable({
'connectToSortable': '.collection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
});body {
background-color: silver;
font-family: Verdana, Georgia;
}
div.main {
margin-left: auto;
margin-right: auto;
width: 740px;
}
div.table {
display: table;
width: 740px;
}
div.td {
display: table-cell;
margin-top: 0;
width: 50%;
}
div.tr {
display: table-row;
}
ul.collection {
background-color: white;
list-style: none;
padding-left: 0;
min-height: 100px;
padding-left: 0;
width: 200px;
}
ul.collection>li {}
ul#selection {
right: 0;
}
ul#source {}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/page.css" />
</head>
<body>
<div class="main">
<div class="table">
<div class="tr">
<div class="td">
<ul id="source" class="collection">
<li class="draggable">Everything</li>
<li class="draggable">Nonfiction</li>
<li class="draggable">Fiction</li>
<li class="draggable">Poetry</li>
</ul>
</div>
<div class="td">
<ul id="selection" class="collection">
</ul>
</div>
</div>
</div>
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery-ui.js"></script>
<script>
jQuery(function() {
jQuery(".collection").sortable({});
jQuery('li', jQuery('.collection')).draggable({
'connectToSortable': '.collection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
});
</script>
</div>
</body>
</html>このスクリプトは、LIのドラッグ2 ULの間を作ることを意図しています。これが実行されると、左側のテーブルセルスタイルのDIVに配置されたULは、テーブルスタイルのDIVの上部に対してフラッシュされません。その頂点は、空のテーブルの底とゆるやかに（または正確に）位置合わせされているように見えます。次のように最初の画像は、異なる背景を持つ、である。
両方ULのは、それらが所望のように上部に向かって面一に位置合わせされる、少なくとも一つのLIを持っている場合。最後のLIがドラッグされると、フリッカー効果が生じる可能性があります。希望フラッシュの外観は以下のとおりです。
私は、彼らが居住または空であるかどうかを彼らのシミュレートされたテーブルセルのあるべき姿の上部にあり、両方のULのようなものを設定したいと思います。
ありがとうございました。私はさらに思っており、クリックするとLIが他のULに切り替わるようにします。これは、現在のULからLIを削除してそれを他のものに追加するjQuery.click（）を使用するのが最善でしょうか？あるいは、ガジェットの代わりにより良い方法がありますか？ TIA、 – JonathanHayward