Jquery.can使JQuery UI可拖、可放、可排序？

Question

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

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

Answer 1

我就是这么做的。

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

$("#list1，#list2，#list3").sortable({ connectWith：'.connectedSortable'，

等等……

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

从一些prod代码中摘录的完整示例...

/* 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();
        }