JQuery Вложенные и сортируемые ограничения

Question

Привет, пожалуйста, помогите, я впервые использую J запрос Ne стабильный. Я хочу ограничить Admin и вкладки Transported не должны перетаскивать. [введите описание ссылки здесь] [2] Пользователи в левом списке пользователей перетаскиваются только под вкладками «Администратор» и «Транспортер» в списке ролей.

Как отключить функцию перетаскивания только на выбранные вкладки

Answer 1

Посмотрите на JSFiddle: https://jsfiddle.net/1vcs0e47/

Я подготовил этот JSFiddle из демонстрационной ссылки: https://dbushell.com/Nestable/

Вещи что я сделал:
1) Добавлен элемент ввода, в котором вы можете ввести имя списка, например «Item 1», «Item 2» et c. ( Примечание: текстовый поиск чувствителен к регистру, также этот искомый текст предназначен только для демонстрации, вы можете реализовать больше идей для поиска, чем я использовал. )

2) При изменении входной элемент, мы нашли div с классом «dd-handle» и применили css «pointer-events» как свойство «none». Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

3) Draggable не будет применяться к элементам, события указателя которых отключены, и мы сделали то же самое. Также сделали вложенный список слишком отключенным.

4) Дана кнопка включения всех отключенных списков, просто для проверки экземпляров.

JS Код:

$(document).ready(function()
{

    var updateOutput = function(e)
    {
        var list   = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
        } else {
            output.val('JSON browser support required for this demo.');
        }
    };

    // activate Nestable for list 1
    $('#nestable').nestable({
        group: 1
    })
    .on('change', updateOutput);

    // activate Nestable for list 2
    $('#nestable2').nestable({
        group: 1
    })
    .on('change', updateOutput);

    // output initial serialised data
    updateOutput($('#nestable').data('output', $('#nestable-output')));
    updateOutput($('#nestable2').data('output', $('#nestable2-output')));

    $('#nestable-menu').on('click', function(e)
    {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
    });

    $('#nestable3').nestable();
        $('#disabled_listname').on('change', function()
        {
                var disabling_listname = $.trim($(this).val());
                console.log('disabling_listname=', disabling_listname);
                console.log('element length=', $('div.dd-handle:contains("'+ disabling_listname +'")').length);
                if($('div.dd-handle:contains("'+ disabling_listname +'")').length > 0)
                {
            $('div.dd-handle:contains("'+ disabling_listname +'")').addClass('dd-handle-disable');
                    $('div.dd-handle:contains("'+ disabling_listname +'")').next('ol.dd-list').find('.dd-handle').addClass('dd-handle-disable');
                }
                if($('div.dd3-content:contains("'+ disabling_listname +'")').length > 0)
                { // just added this conditions for "Draggable Handles" example, only for demo purpose.
            $('div.dd3-content:contains("'+ disabling_listname +'")').parent().addClass('dd-handle-disable');
                    $('div.dd3-content:contains("'+ disabling_listname +'")').next('ol.dd-list').find('.dd-handle').addClass('dd-handle-disable');
                }
        });

        $('#enable_dragging').on('click', function()
        {
            $('.dd-handle-disable').removeClass('dd-handle-disable');
        });
});