Я пытаюсь перетащить и отключить пользовательские функции. У меня так много папок и вы хотите переместить папки в одну папку на другую, как в outlook.com. все папки находятся в виде элементов li, таких как:
<div id="test">
<ul>
<li>.....</li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
</ul>
</div>
Я использовал ниже код для перетаскивания. при выполнении драпировки и падения позиции элементов li не перемещаются, а в стилях вверху и слева добавляются. Я хочу удалить элемент li и добавить в целевые элементы, которые были сброшены.
$('#test ul li').draggable({
cursor: 'move'
});
$('#test ul li').droppable({});
Ниже приведен образ от outlook.com. Структура папок будет выглядеть следующим образом:
Я не хочу перемещать входящие, архивные, отправленные, удаленные папки. но хотите переместить папку под этим элементом. Как и папка "sdfsdf" из "Удалено в отправленный".
Как это можно достичь.
Этот JSFiddle должен быть тем, что вы ищете. Он реализует очень базовую функцию перетаскивания, которая не включает элементы списка верхнего уровня.
Он использует приведенный ниже код:
$(document).ready(function() {
$('#test ul li ul li').draggable({
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: 'move'
});
$("#test ul li ul").droppable({
hoverClass: "droppable-hover",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
var $item = ui.draggable;
$item.appendTo($(this));
}
});
});
Этот код делает все подпункты перетаскиваемыми и все вспомогательные списки недоступными, но игнорирует начальные элементы уровня. Когда вы перетаскиваете элемент в новый UL
он добавляет элемент в этот список, который удалит его из предыдущего списка.
Используйте метод " disable
", чтобы отключить опцию перетаскивания определенного элемента
$( ".selector" ).draggable( "disable" );
Вы можете просто отфильтровать элемент, который вы не хотите.
Например:
// select only sub list
$('#test ul li li').draggable();
$('#test ul li li').dropable();