jQueryUIのドラッグ可能/ドロップ可能/ソート可能を使用して、ソースボックスからいずれかの宛先ボックスにアイテムを移動(コピーではなく)しようとしています。これは、ユーザーがアイテムを必要なボックスに並べ替えることができるようにするためです。
- 次に、ページをサーバーに POST すると、選択内容とアイテムを入れたボックスが保存されます。そのため、アイテムがボックスの 1 つに「ドロップ」されると、ドロップされたアイテムの ID と、それが入れられたボックスの ID を取得する必要があります。これを後で配列/オブジェクトに格納します。
- ユーザーがドロップ可能なボックス内のアイテムを注文できれば便利ですが、重要ではありません。順序付けられていないリストがどのように機能するかのように、それらが自動的にうまく整列する必要があります。現時点では、アイテムは宛先ボックスのどこにでもドロップするため、すべてのアイテムが宛先ボックス内のいたるところにあります。
- ユーザーが考えを変えた場合、アイテムを移動先のボックスから移動元のボックスに戻すことができる必要があります。
- 以下のコードのシェルがありますが、動作せず、移動したアイテムの ID または宛先 ID を取得できないようです。新しい HTML5 データ属性を使用しようとしましたが、何も得られないようです。私のサイトは HTML5 なので、これらの新しいテクニックを使用できます。
更新:動作しました - JSfiddle以下の完全なソリューション:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Source + Double Destination Demo</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.droppable.js"></script>
<script src="../../ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
h1 { padding: .2em; margin: 0; }
#destinationA, #destinationB { width: 200px; float: left; }
/* style the list to maximize the droppable hitarea */
#destinationA ol, #destinationB ol, #source ul { margin: 0; padding: 1em 0 1em 3em; background-color: #f7f7f7; }
</style>
<script>
$(function()
{
$( "#source li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#destinationA ol, #destinationB ol, #source ul" ).droppable(
{
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui )
{
// Get id of the item that was moved
var itemIdMoved = ui.draggable.data('item-id');
var itemName = ui.draggable.data('item-name');
// Get id of the current destination (the item is dropped into the ul tag so we need to go up a level to get the div id)
var destinationId = $(this).parent().attr('id');
// Move the draggable into the destination box (actually moves the original li element including data attributes)
ui.draggable.appendTo(this);
// Debug
console.log('item ' + itemName + ' (id: ' + itemIdMoved + ') dropped into ' + destinationId);
}
}).sortable(
{
sort: function()
{
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
</head>
<body>
<h1 class="ui-widget-header">Source</h1>
<div id="source">
<ul>
<li data-item-id="1" data-item-name="One">Item 1</li>
<li data-item-id="2" data-item-name="Two">Item 2</li>
<li data-item-id="3" data-item-name="Three">Item 3</li>
<li data-item-id="4" data-item-name="Four">Item 4</li>
</ul>
</div>
<div id="destinationA">
<h1 class="ui-widget-header">Destination A</h1>
<ol>
</ol>
</div>
<div id="destinationB">
<h1 class="ui-widget-header">Destination B</h1>
<ol>
</ol>
</div>
</body>
</html>