Question

总而言之，我实现了Jqueryui拖放和Jqueryui可选择，如果我同时选择它们，我可以移动2个对象。我的问题是，当我这样做时，包含父项只在clicked元素上工作，而另一个所选元素可以从父项移出。这是我的Draggable和Selectable imlementation：

Draggable: {
        init: function(el, options) {

            if (options == undefined) {
                options = { 
                    containment: "parent"
                };
            }
            $(el).draggable(options, {
                scroll: false,
                snap: '.gridlines',
                snapTolerance: $('.grid').attr('data-size') / 2,
                revert: "invalid",

                drag: function(event, ui) {                
                    selectedComponent = $(this);
                },
                start: function(event, ui) {                        
                    if ($(this).hasClass("ui-selected")){
                        selected = $(".ui-selected").each(function() {
                           var el = $(this);
                           el.data("offset", el.offset());
                        });
                    }
                    else {
                        selected = $([]);
                        $(".playground").find('.existing-component').removeClass("ui-selected");
                    }

                    offset = $(this).offset();
                },
                stop: function(event, ui) {
                    $('.gridlines').removeClass('highlighted');
                    $('.obstacles').remove();

                    if (!$(this).hasClass('ui-selected')) $(this).addClass('ui-selected')
                }

            });
        },
        update: function(el, optionName, optionValue) {


            $(el).resizable( "option", optionName, optionValue );
            }
    },
Selectable: {
        init: function(el) {
            $(el).selectable({
                filter: '.existing-component', 
                selecting: function (event, ui) {
                    $(event.target).children('.ui-selecting').find('.existing-component').removeClass('ui-selecting');
                },
                stop: function(event, ui) {
                    var selectedItems = $('.ui-selected', this);
                    if (selectedItems.length >= 2) {
                        $('.ui-selected').addClass('ui-selecting-multiple');
                    }
                },
                selected: function(event, ui) {
                    selectedComponent = $(ui.selected);                             
                }
            });

            $(el).find('.existing-component').click( function(e){
                if (!e.shiftKey) {
                    $(el).find('.existing-component').removeClass("ui-selected ui-selecting-multiple");
                    $(el).find('.existing-component').attr('style', function(i, style)
                    {
                        return style.replace('z-index: 999', '');
                    });
                    $(this).addClass("ui-selecting");
                } else {
                    if ($(this).hasClass("ui-selected")) {
                         $(this).removeClass("ui-selected ui-selecting-multiple");
                }
                else {
                    $(this).addClass("ui-selecting");

                }
            }

            $(el).data("ui-selectable")._mouseStop();

            e.stopPropagation();
        });
    }
}

我如何将所有选定组件的包含应用于父级？

Answer 1

我没有找到任何解决我问题的方法，因为我实现了我自己的解决方案，在多选中我主要在左，上，下，右（multipleMinL，multipleMinT，multipleMaxB，multipleMaxR）计算元素，我重新初始化每个具有计算值的多选组件：

$('.ui-selecting-multiple').each(function() {
    left = (multipleMinL.offset().left - multipleMinL.position().left) + $(this).offset().left - multipleMinL.offset().left;
    top =  (multipleMinT.offset().top - multipleMinT.position().top) + $(this).offset().top - multipleMinT.offset().top;
    width = $(this).offset().left + ($(this).parent().outerWidth() - multipleMaxR.position().left - multipleMaxR.outerWidth());
    height = $(this).offset().top + ($(this).parent().outerHeight() - multipleMaxB.position().top - multipleMaxB.outerHeight());
    Draggable.init($(this), {containment: [left,top,width,height]});
});

以及在删除ui-selecting-multiple类之前的其他操作我使用

重新初始化每个组件

Draggable.init('.ui-selecting-multiple', containment:'parent');

这对我有用，如果有人得到更好的解决方案，请发布。

Jqueryui多次选择d＆amp; d遏制

1 个答案: