Я пытаюсь использовать jQueryUI, перетаскиваемый / сбрасываемый / сортируемый, чтобы перемещать (не копировать) элементы из исходного блока в любой из целевых блоков. Это так пользователь
можно сортировать элементы в нужные им ящики.
- Тогда, когда они отправят страницу обратно на сервер, они сохранят свой выбор и что
коробка, в которую они кладут предметы. Поэтому, когда предмет «упал» в один
я должен как-то получить идентификатор упавшего предмета и
идентификатор коробки, в которую он был помещен. Я буду хранить это в
массив / объект позже.
- Было бы удобно, если бы пользователь мог заказать
предметы в коробках, но не критично. Они мне нужны
выстроиться красиво автоматически, хотя вроде как предполагается неупорядоченный список
работать. На данный момент предметы просто падают в любом месте
коробки назначения, так что все предметы находятся повсюду внутри коробки назначения.
- Если пользователь передумает, он сможет переместить элемент обратно из поля назначения в окно источника
- У меня есть оболочка кода ниже, но она не работает, и я не могу получить идентификаторы перемещенного элемента или конечного идентификатора. Я пытался использовать новые атрибуты данных 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>