説明が少し複雑かもしれません。次のような100 x 100 pxの9枚の画像を含むグリッドがあります(各数字は画像を象徴しています):
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を挿入する場所を指定する関数を作成します。アイテムがドロップされると、ドロップ機能は、ドロップされたアイテムの後にドラッグされたアイテムを挿入し、ドロップされたアイテムに対して挿入機能を呼び出して、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>
このプラグインを見てください：