Question

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

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

Answer 1

我就是这样做的。

创建要连接的所有元素并对其进行排序，然后使用connect with param将所有带有“.connectedSortable”类的元素拖放/拖放。

$（“＃list1，＃list2，＃list3”）。sortable（{ connectWith：'。connectctedSortable'，

等...

需要源代码才能给你一个正确的回复，但这个问题会让你或其他任何有同样问题的人开始。

从某些产品代码中删除的完整（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();
        }

Jquery.can使JQuery UI可拖动，可放置，可排序的工作在一起吗？

1 个答案: