現在、jQueryをピックアップしてドラッグ＆ドロップ環境を構築しようとしています。私はほとんどのことをうまく機能させることができます。ただし、2 つ以上のアイテムをドロップ領域にドラッグしようとすると、後続のアイテム ドロップの Y 位置のドロップが常に前のアイテム ドロップよりも大きくなります。
誰でも問題がどこにあるか知っていますか? 前もって感謝します...
PS : この UI をテストしている間、ドロップ可能な領域がウィンドウ サイズよりも大きい側にスクロール バーがあるサイズ ダウン ウィンドウですばやくドラッグして、ドラッグ アイテムは jQuery コンテインメント セットをエスケープすることができます。バックグラウンドで非表示またはダーティな要素になります。ドラッグドロップ Web 環境をコーディングするためのより良い方法とよりクリーンな方法はありますか?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://stkxp/metasphere/fac/home/home.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(
function(){
$("#menu").draggable();
$(".drag").draggable(
{helper:'clone'}
);
$("#drop").droppable(
{
accept:'.drag',
drop:function(event,ui){
newID = $.datepicker.formatDate('@', new Date() );
$(this).append(
$(ui.draggable).clone().attr(
{
id:newID
}
)
);
$("#"+newID).css(
{
top: event.pageY +"px",
left: event.pageX-this.offsetLeft +"px"
}
);
$("#"+newID).addClass("node");
$("#"+newID).removeClass("drag");
$("#"+newID).draggable(
{
containment:$("#drop")
}
);
}
}
)
}
);
</script>
<style>
#drop{
width:55%;
min-width:400px;
min-height:1000px;
float:left;
border:1px solid blue;
}
#property{
width:24%;
min-width:235px;
float: left;
border:1px solid black;
}
</style>
</head>
<body>
<div id="drop"></div>
<div id="property">
<div class="drag">-> Item 1</div>
</div>
</body>