在拖放面板中限制最大元素

问题描述

我的网站上有一个可排序的面板(jQuery UI)，但需要将每列中的元素数量限制为最多12个.

I've got a sortable panel (jQuery UI) on my website, but need to limit the amount of elements in each column to a maximum of 12.

我已经尝试了一些方法，但是似乎无法使其正常工作.我需要查看"i"是否为12或更大，如果是，请不要更新，但我似乎做不到！

I've tried a few things, but can't seem to get it to work. I need to see if 'i' is 12 or greater, and if so, don't update but I can't seem to do it!

有人得到任何建议或可以以正确的方式推动我吗?

Anyone got any advice or can push me the right way?

jQuery在下面！

The jQuery is below!

function updateWidgetData(){
    var items=[];
    $('.column').each(function(){
        var columnId=$(this).attr('id');
        $('.dragbox', this).each(function(i){
            var collapsed=0;
            if($(this).find('.dragbox-content').css('display')=="none")
                collapsed=1;
            var item={
                id: $(this).attr('ID'),
                collapsed: collapsed,
                order : i,
                column: columnId
            };
            items.push(item);
        });
    });
    var sortorder={ items: items };

    //Pass sortorder variable to server using ajax to save state

    $.post('includes/updatePanels.php', 'data='+$.toJSON(sortorder), function(response){
        if(response=="success")
            $("#console").html('<div class="success">Your preferences have been saved</div>').hide().fadeIn(1000);
        setTimeout(function(){
            $('#console').fadeOut(1000);
        }, 2000);
    });
}

推荐答案

可ortables

对于连接的可排序对象，解决方案是在拖动开始时计算每个可排序对象中的元素，并禁用具有最大允许元素数量的元素.我们需要排除当前的可排序对象，以便我们可以重新排序其中的项目并允许拖动当前元素.

Sortables

For connected sortables, the solution is to count the elements in each sortable when dragging starts, and disable the ones which have the maximum number of allowed elements. We need to exclude the current sortable, so we can re-order the items within and allow the current element to be dragged.

这里的问题是，如果我们对任何sortables事件执行上述操作，则为时已晚，禁用它们将没有任何效果.解决方案是将检查绑定到项目本身的 mousedown 事件，该事件将在可排序对象获得任何控制权之前触发.当拖动停止时，我们还需要重新启用所有可排序项.

The problem here is that if we do the above on any of the sortables' events, it's already too late and disabling them won't have any effect. The solution is to do the bind the check to the mousedown event of the items themselves, which will fire before the sortable would get any control. We also need to re-enable all sortables when dragging stops.

看看这个示例，将<ul>可排序对象与<li>个项目一起使用，每个可排序项目中的最大项目数为3: http://jsfiddle.net/qqqm6/10/

Have a look at this example, using <ul> sortables with <li> items, the maximum number of items in each sortable is 3: http://jsfiddle.net/qqqm6/10/

$('.sort').sortable({
    revert: 'invalid',
    connectWith: '.sort',
    stop: function(){
        // Enable all sortables
        $('.sort').each(function(){
            $(this).sortable('enable');
        });
    }
});

$('.sort li').mousedown(function(){
    // Check number of elements already in each sortable
    $('.sort').not($(this).parent()).each(function(){
        var $this = $(this);

        if($this.find('li').length >= 3){
            $this.sortable('disable');
        } else {
            $this.sortable('enable');
        }
    });
})

可拖动物品和可放置物品

理论很简单，解决方案有点棘手，jQuery UI中确实应该有一个适当的选项来取消放置操作.如果有，但是我错过了什么，请告诉我.

Draggables and droppables

The theory is simple, the solution is a bit tricky, there should really be a proper option in jQuery UI to cancel the operation on drop. If there is, but I missed something, please let me know.

无论如何，这是在drop事件中检查最大计数的方法(在此示例中，最大计数为4):

Anyways, here's how you check for maximum count in the drop event (maximum of 4 in this example):

$('.drag').draggable({
    revert: 'invalid',
    stop: function(){
        // Make it properly draggable again in case it was cancelled
        $(this).draggable('option','revert','invalid');
    }
});

$('.drop').droppable({
    drop: function(event,ui){
        var $this = $(this);

        // Check number of elements already in
        if($this.find('.drag').length >= 4){
            // Cancel drag operation (make it always revert)
            ui.draggable.draggable('option','revert',true);
            return;
        }

        // Put dragged item into container
        ui.draggable.appendTo($this).css({
            top: '0px',
            left: '0px'
        });

        // Do whatever you want with ui.draggable, which is a valid dropped object
    }
});

请参见以下操作: http://jsfiddle.net/qqqm6/

这篇关于在拖放面板中限制最大元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！