ネストされたソータブルを使用してUIエディターを作成しています。基本的に私が推測するポートレットに似ています。ユーザーはウィジェットまたはウィジェットホルダーを選択し、それらを画面上で移動して保存します。彼らは本当にびくびくしていて、特定の場所に固執するのが好きではありません。彼らはトップダウンでドラッグすることを好むようです。ホルダーとウィジェットにパディングを追加しようとしましたが、それ以上改善されていないようです。このがらくたをより正確にする本当に良い方法を知っている人はいますか?私は見つけることができるほとんどすべてを試しました....私は問題を(ほとんど)理解しています、私はただ修正を理解することができません。1つの問題は、スポットにスナップすると、何かが移動し、移動するとレイアウトが大幅に変更され、プレースホルダーが前後にジャンプして落ち着く場合があります。なぜできるのかわからない」
$(".widget_holder").sortable({
distance: 30,
revert: true,
items: ".widget",
opacity: .8,
scroll: true,
scrollSensitivity: 100,
scrollSpeed: 100,
handle: ".move_widget",
dropOnEmpty: true,
tolerance: "pointer",
cursorAt: { top:0, left: 0 },
start: function(e, ui){
$(".widget_holder", ui.item).hide();
$('.widget').addClass("drag_padding");
$(".widget_holder" ).addClass("holder_hover").addClass("drag_padding").sortable("refresh");
},
update: function(e, ui){
if(this === ui.item.parent()[0]) {
updateByHolder();
}
},
stop: function(e, ui){
$(".widget_holder", ui.item).show();
$('.widget').removeClass("drag_padding");
$(".widget_holder" ).removeClass("holder_hover").removeClass("drag_padding");
}
}).sortable(
"option", "connectWith", '.widget_holder'
);