Перетащите папки с помощью перетаскиваемых и сбрасываемых функций jquery

Question

Перетащите папки с помощью перетаскиваемых и сбрасываемых функций jquery

0

Я пытаюсь перетащить и отключить пользовательские функции. У меня так много папок и вы хотите переместить папки в одну папку на другую, как в 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" из "Удалено в отправленный".

Как это можно достичь.

Cindrella 03 окт. 2013, в 12:56

Источник

0

Проверьте это lnk: stackoverflow.com/questions/1324044/…
Krish 03 окт. 2013, в 10:09

Теги:

jquery

jquery-ui

3 ответа

0

Используйте метод " disable ", чтобы отключить опцию перетаскивания определенного элемента

$( ".selector" ).draggable( "disable" );

krish 03 окт. 2013, в 08:32

0

Вы можете просто отфильтровать элемент, который вы не хотите.

Например:

// select only sub list
$('#test ul li li').draggable();
$('#test ul li li').dropable();

Chokchai 03 окт. 2013, в 08:16

Ещё вопросы

Проверьте это lnk: stackoverflow.com/questions/1324044/…

Nunners · Accepted Answer · 2013-10-03T08-07-00.000Z

Этот 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 он добавляет элемент в этот список, который удалит его из предыдущего списка.