jquery - Jquery.can 使 JQuery UI 可拖动、可放置、可排序一起工作吗？

Question

在我的页面中，我有一些动态创建的可拖动的笔记贴纸。然后我有一个同时可以排序（启用排序）的滴管。我将便笺贴纸拖放到滴管内，并在滴管内上下排序（通过拖动）贴纸！

我想我可以使用 Jquery UI 来实现。但总是犯错！

Answer 1

我就是这样做的。

使您想要连接和排序的所有元素都可排序，然后使用 connect with param 使所有具有 '.connectedSortable' 类的元素都可拖放。

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

ETC....

需要源代码给你一个适当的回应，但这应该让你或其他任何有同样问题的人开始。

从一些产品代码中提取的完整（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();
        }