Название может звучать немного странно, но оно не действует.
У меня есть панель инструментов и холст под ней. Я хочу, чтобы кто-то мог перетащить кнопку панели инструментов (<button/>) на холст при следующих условиях:
- оригинальная кнопка остается на своем месте
- когда кнопка отпущена, это фактически другой элемент, например:
<div/>
- некоторые области холста нельзя отбросить, это зависит от селектора
Идея состоит в том, что холст - это контейнер предметов. Некоторые предметы могут быть самими контейнерами, некоторые нет. Когда выполняется операция D & D, брошенный предмет может находиться только внутри такого контейнера.
Что еще хуже, элементы фактически упорядочены, а не с абсолютной позицией (в настоящее время я использую сортируемый эффект jQuery) - это ожидаемый эффект.
Состав:
<div id="toolbar">
<button class="add-item"> Add Item </button>
<button class="add-container"> Add Container </button>
</div>
<div id="canvas">
<span class="item"> Caption 1 </span>
<span class="container">
Caption 2
<span class="items">
<span class="item"> Caption 3 </span>
</span>
</span>
</div>
Сценарий:
$('#canvas, .container').sortable({
"revert": true,
"connectWith": '#canvas, .container>.items',
"containment": '#canvas',
});
$('#toolbar button').droppable(/* ??? */);
Пока что моя главная проблема связана с предметом, который можно опустить. Существует множество (разумных) «причуд», которые делают его несовместимым с моей системой.
Ссылки: