ドラッグ可能なボックスを生成することから始め、jquery-ui draggable()を使用して上部にハンドルを作成します。
ただし、ボックス内のコンテンツがフラッシュされることがあり、これによりドラッグ機能の移動が遅くなる傾向があります。ゴースティング型システムに移動してドラッグすると、移動先のボックスが表示され、ドロップした場所に移動することにしました。
Chrome / Firefoxで完全に実行できましたが、IE8またはIE9で実行できません。誰かが何か提案があったかどうか疑問に思います。以下はjquery固有のコードです。
$(document).ready(function () {
$container = $('#container');
$container.draggable({
handle: "#header",
containment: "parent",
scroll: false,
helper: function () {
return "<div class='dragbox' style='width:" + ($container.width()) + "px;height:" + ($container.height()) + "px'></div>";
},
stop: function (e, ui) {
var top = ui.position.top,
left = ui.position.left;
$container.css({
'top': top + "px",
'left': left + "px"
});
}
});
});
例はhttp://jsfiddle.net/Ep5wu/にあります。
前もって感謝します!