Может ли Jquery.I сделать JQuery UI совместимым, перетаскиваемым, сортируемым? - PullRequest
1 голос
/ 19 октября 2010

На моей странице есть динамически созданная наклейка с заметками, которую можно перетаскивать. И тогда у меня есть пипетка, которая сортируется (включить сортировку) одновременно. Я перетаскиваю наклейку с запиской внутри пипетки и сортирую (перетаскивая) наклейку вверх и вниз внутри капельницы!

Я думаю, что смогу сделать это с помощью пользовательского интерфейса Jquery. Но всегда ошибайся!

1 Ответ

2 голосов
/ 18 января 2011

Вот как я это делаю.

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

$ ("# list1, # list2, # list3"). Sortable ({connectWith: '.connectedSortable',

и т.д ....

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

Полный (ish) пример, извлеченный из некоторого кода продукта ...

/* Widget assignment ui element bind */
            $("#leftAssignedWidgets, #unassignedWidgets, #rightAssignedWidgets, #topAssignedWidgets, #bottomAssignedWidgets").sortable({
                connectWith: '.connectedSortable',
                receive: function (event, ui) {
                    // recieve is only called when we drop a widget into a new section
                    // not when we move one around a section to reorder
                    // container id holds the id of the containder we dropped into

                    var widgetId = ui.item.attr('id');
                    var containerId = $(this).attr('id');

                    var widgetContainer = '';

                    switch (containerId) {
                        case 'topAssignedWidgets':
                            widgetContainer = 'top';
                            break;
                        case 'bottomAssignedWidgets':
                            widgetContainer = 'bottom';
                            break;
                        case 'leftAssignedWidgets':
                            widgetContainer = 'left';
                            break;
                        case 'rightAssignedWidgets':
                            widgetContainer = 'right';
                            break;
                        default:
                            widgetContainer = 'unassigned';
                            break;
                    }

                    // widgets have which positions they can be placed in stored as classes. 
                    // ensure if we drop onto the right container the widget has the 'right' class. else error and return
                    // unless we drop it on unassigned in which case dont check as assign widghet below will remove it
                    if (!$(ui.item).hasClass(widgetContainer) && widgetContainer != 'unassigned') {

                        //ui.item.attr('class') example - 'ui-state-default right left'
                        // if a widget does not have the right class (i.e. left, when being dropped on the left panel )
                        if (ui.item.attr('class').indexOf(widgetContainer) == -1) {

                            var classList = ui.item.attr('class').replace('ui-state-default', '').split(/\s+/); ;
                            var classMessage = '';
                            $.each(classList, function (index, item) {
                                if (item != '') {
                                    classMessage += item + ',';
                                }
                            });
                            // remove traling ','
                            classMessage = classMessage.replace(/,$/, '')

                            $(ui.sender).sortable('cancel');

                            $("#dialog-wrong-placement p span").html(classMessage);
                            $("#dialog-wrong-placement").dialog({
                                height: 140,
                                modal: true
                            });

                            return;
                        }
                    }

                    AssignWidget(widgetId, containerId);
                },
                stop: function (event, ui) {
                    // stop is called everytime we stop dragging a widget. This means we need to ignore 
                    // when a widget has been dropped into a new section as this will of been handled in the above
                    // recieve function. We use this behaviour to reorder items if they have been dropped on the same list

                    var containerId = $(this).attr('id');
                    var widgetId = ui.item.attr('id');

                    alert('a');
                    // if we drop it on unassigned then we will of deleted it os dont bother with reorder
                    if (containerId != 'unassignedWidgets') {
                        // if widget already exists in section then re-order
                        //    alert(containerId + ' ' + widgetId);
                        if ($('#' + containerId + ' li').index($('#' + widgetId)) > -1) {
                            // alert('u bet');
                            AssignWidget(widgetId, containerId);
                        }
                    }
                },
                placeholder: 'ui-state-highlight'
            });

            // setup colorbox
            $.each($(".widget-preview"), function (i, item) {
                $(this).colorbox({
                    width: "400px",
                    height: "400px",
                    inline: true,
                    href: "#view_widget",
                    onComplete: function () {
                        PreviewWidget($(this).closest('li').attr('id'));
                        if ($(this).hasClass('right')) {
                            $("#view_widget").addClass('right');                            
                        }
                    }
                })
            });

            $('#dialog-no-preview-available').dialog({
                            autoOpen: false,
                            height: 140,
                            modal: true
                        });

            $('.noPreviewAvailable').click(function () {
                $('#dialog-no-preview-available').dialog('open');
            });


            $("ul, li").disableSelection();
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...