Geek asks and answers

Limit the maximum items in the drag panel

I have a sorted panel (jQuery UI) on my website, but you need to limit the number of elements in each column to a maximum of 12.

I tried a few things but can't get it to work. I need to find out if "i" is 12 or more, and if so, do not update, but I can not do it!

Has anyone got any tips or can push me to the right path?

jQuery 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);
    });
}
+3
source share
1 answer

Sortables

, . , .

, sortables, , . , mousedown , , - . .

, <ul> <li>, 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');
        }
    });
})

Draggables droppables

, , jQuery UI , . , - , , .

, drop ( 4 ):

$('.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/

+15

More articles:


All Articles