説明するのが少し複雑かもしれません。私は（各数値は、画像を象徴）9枚の画像と、このような100×100ピクセルのグリッドを有する：私が欲しいもの宛先が変更されたdivの場所を変更する
1 2 3
4 5 6
7 8 9
は、ユーザが、例えばドラッグアンドドロップすることができるということです9以上1そして彼らはこのような場所を変更します：
9 2 3
4 5 6
7 8 1
ソート可能なjqueryのUIは、ソリューションがフロートを使用しているため動作しません。すべてのボックスを右または左に「押し込む」：例：
9 1 2
3 4 5
6 7 8
ありがとうございます。
は、このプラグインを見てみましょう：
これをドラッグとドロップ可の両方を使用しています。 Draggableはドロップ時の元の位置に戻ります。ドラッグが開始されると、DraggableはアイテムがドロップされるDroppableを挿入する場所を指定する関数を作成します。アイテムがドロップされると、drop関数はドロップされたアイテムの後にドラッグされたアイテムを挿入し、ドロップされたアイテムに対してinsert関数を呼び出してDroppableを正しい位置に移動します。
$(function() {
$('.item').draggable({
containment: 'parent',
revert: true,
revertDuration: 0,
start: function() {
var that = $(this);
var previous = that.prev('.item:last');
var next = that.next('.item:first');
that.data('insert' , function(elem) {
if (previous.size() > 0) {
$(elem).insertAfter(previous);
}
else if (next.size() > 0) {
$(elem).insertBefore(next);
}
});
}
});
$('.item').droppable({
accept: '.item',
drop: function(event, ui) {
var elem = $(this);
if (elem.siblings('.item').size() > 1) {
ui.draggable.insertAfter(elem);
var insert = ui.draggable.data('insert');
insert(elem);
}
else { // case where there are only two elements, swap
var parent = elem.closest('.container');
var first = parent.children('.item:first');
var last = parent.children('.item:last');
last.insertBefore(first);
}
}
});
});
<div id="container">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
</div>
お返事ありがとうございました！
あなたのソリューションはうまく見えますが、最初のものは位置1と2を変更するときにいくつかのエラーが発生します。しかし、彼らは多くを助ける！
私は正しい方向への一歩だと思うコードをいくつか作ろうとしました。どう思いますか？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Drag drop 1</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".item").draggable({
// Elements cannot go outside #container
containment: 'parent',
// Make sure the element can only be dropped in a grid
grid: [150,150],
start: function(event, ui) {
// Make sure picture always are on top when dragged (z-index)
$(this).css({'z-index' : '100'});
// Show start dragged position
var Startpos = $(this).position();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},
stop: function(event, ui) {
// Revert to default layer position when dropped (z-index)
$(this).css({'z-index' : '10'});
// Show dropped position
var Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
}
});
});
</script>
<style>
#container {
width:480px;
border:1px solid #000;
}
.item {
position:relative;
width:150px;
height:150px;
z-index:10;
}
</style>
</head>
<body>
<div id="container">
<img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" /><img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" /><img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" /><img id="productid_4" src="images/pic4.jpg" class="item" alt="" title="" /><img id="productid_5" src="images/pic5.jpg" class="item" alt="" title="" /><img id="productid_6" src="images/pic6.jpg" class="item" alt="" title="" /><img id="productid_7" src="images/pic7.jpg" class="item" alt="" title="" /><img id="productid_8" src="images/pic8.jpg" class="item" alt="" title="" /><img id="productid_9" src="images/pic9.jpg" class="item" alt="" title="" />
</div>
<div style="clear:both;"></div>
<div id="start">Waiting...</div>
<div id="stop">Waiting...</div>
</body>
</html>
いつも実際のコードを見るのに役立ちます。 HTML、CSS、およびJS。 – ichiban