次のドラッグ可能なリスト項目構造があります。
<ul id="dadCol_0" class="dad-list ui-sortable">
<li class="dad-item ui-draggable" id="sl1" style="position: relative;">1</li>
<li class="dad-item ui-draggable" id="sl2" style="position: relative;">2</li>
<li class="dad-item ui-draggable" id="sl3" style="position: relative;">3</li>
<li class="dad-item ui-draggable" id="sl4" style="position: relative;">4</li>
<li class="dad-item ui-draggable" id="sl5" style="position: relative;">5</li>
</ul>
長方形の内側をクリックしてドラッグを開始しても問題ありませんが、この長方形の中心にしたいです(幅/ 2、高さ/ 2)。clickAt
私が推測するプロパティを使用する必要がありますが、これまでに行ったことの小さな例を次に示します。
$('.dad-item').each(function() {
$(this).draggable({
opacity: 0.6,
});
});
これにより不透明度が調整されますが、ドラッグは現在壊れています。アイテムは順序を変更せず、トリガーを元に戻すこともありません。
編集:2回目の試行:
dad_list.sortable({
connectWith: 'ul.dad-list',
containment: '#containment',
items: 'li.dad-item',
cursorAt: {
top: $(this).height()
},
stop: function(event, ui) {
serializedads();
}
});
そして今、私はそれを上下に動かすことができず、水平にしか動かすことができません