сортировать несколько элементов одновременно с помощью jquery.ui.sortable

Question

кому-нибудь удалось отсортировать несколько элементов одновременно с помощью jquery.ui.sortable?мы работаем над приложением для управления фотографиями.

1. выберите несколько элементов
2. перетащите их в другое место.

thanx

Answer 1

У меня было похожее требование, но в решении в принятом ответе есть ошибка.Он говорит что-то вроде «insertBefore of null», потому что он удаляет узлы.

А также я попробовал jQuery multisortable , он перетаскивает выбранные элементы друг на друга при перетаскивании, чтоне то, что я хочу.

Так что я развернул свою собственную реализацию и надеюсь, что она спасет других.

Fiddle Link .

Исходный код:

$( "#sortable" ).sortable({
    // force the cursor position, or the offset might be wrong
    cursorAt: {
        left: 50,
        top: 45
    },
    helper: function (event, item) {
        // make sure at least one item is selected.
        if (!item.hasClass("ui-state-active")) {
            item.addClass("ui-state-active").siblings().removeClass("ui-state-active");
        }

        var $helper = $("<li><ul></ul></li>");
        var $selected = item.parent().children(".ui-state-active");
        var $cloned = $selected.clone();
        $helper.find("ul").append($cloned);

        // hide it, don't remove!
        $selected.hide();

        // save the selected items
        item.data("multi-sortable", $cloned);

        return $helper;
    },

    stop: function (event, ui) {
        // add the cloned ones
        var $cloned = ui.item.data("multi-sortable");
        ui.item.removeData("multi-sortable");

        // append it
        ui.item.after($cloned);

        // remove the hidden ones
        ui.item.siblings(":hidden").remove();

        // remove self, it's duplicated
        ui.item.remove();
    }
});

Answer 2

Для этого есть плагин jQuery UI: https://github.com/shvetsgroup/jquery.multisortable

jsFiddle: http://jsfiddle.net/neochief/KWeMM/

$('ul.sortable').multisortable();

Answer 3

... или просто определите опцию 'items' для вашей мультисортировки следующим образом (например):

$('table tbody').multisortable({
  items: 'tr'
});

Answer 4

вы можете использовать shvetsgroup / jquery.multisortable

но это создаст проблему .. потому что js предназначен только для

тегов ...

, но настройте его, чтобы использовать его, это очень просто, я расскажу вам, как ????

сначала скачайте этот .js и используйте его в своей программе ...

шаг 1. откройте файл js ... теперь отредактируйте следующие строки ...

$.fn.multiselectable.defaults = {
    click: function(event, elem) {},
    mousedown: function(event, elem) {},
    selectedClass: 'selected',
    items: 'li'
};

выше приведены строки от 107 до 112 ....

там вы можете увидеть "предметы: 'li'

при этом используйте ваш тег, который вы используете, чтобы заключить это изображение, например, если вы используете, или что-то, что вы используете, как это

$.fn.multiselectable.defaults = {
    click: function(event, elem) {},
    mousedown: function(event, elem) {},
    selectedClass: 'selected',
    items: 'div' // or any tag you want...
};

и от 249 до 254

selectedClass: 'selected',
    placeholder: 'placeholder',
    items: 'li'
};

* *} 1 022 (Jquery); * +1023 *

измените строку "item: 'li'" на свой тег, подобный этому

selectedClass: 'selected',
    placeholder: 'placeholder',
    items: 'div'  // or anything else
};

} (Jquery); * * тысяча двадцать-восемь

если вы работаете над текстовыми полями внутри этих конвертов .. вам тоже нужно избавиться от этих строк

        // If no previous selection found, start selecting from first selected item.
        prev = prev.length ? prev : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
        var prevIndex = prev.index();

после этой строки комментариев ...

добавить код строки, который ищет текстовое поле или флажок или любой элемент взаимодействия внутри него ...

вот так ..

        // If no previous selection found, start selecting from first selected item.
item.children("input").focus(); // customize this code to get your element focus...
        prev = prev.length ? prev : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
        var prevIndex = prev.index();

, а также для обозначения выбранных тегов или элементов ... используйте стили, подобные этой

        div { margin: 2px 0; cursor: pointer; }
        div.selected { background-color: orange }
        div.child { margin-left: 20px; }

на самом деле я использовал div .. вместо этого вы можете использовать любой тег, какой пожелаете ...

надежда поможет вам .... если это не так ... прочитайте еще раз .. и спросите снова ....

хочет