Prevent widget from being dragged outside of containing div?

[seiyria]

Hi all,

I'm currently trying to get Gridster to constrain itself inside of a grid. I don't want it to expand vertically outside of my div. I'm currently using dustmoo's fork of Gridster for the "shift_larger_widgets_down: false" feature. What I'm trying to do is prevent it from being dragged outside of the div, but I can't seem to get any events to stop - I've tried

draggable.start = function(e,u) {
    e.preventDefault();
    e.stopPropagation()
    return false;
}

..but none of these seem to stop the event from happening. Is there a way I can prevent these events from happening?

For reference, I'm trying to prevent this:

From looking like this:

[bostondevin]

I'd like to know how to do this too!

[harminderbomrah]

For a fix. You can store the positions(i.e. data-col and data-row) of all the blocks before you start dragging a block. You can do this on mousedown event. Then you can bind an event draggable.stop and check all columns if any block is out of your outter div area. You can do this by base_margin + block's height + block's top position > outer div height. If this condition is true revert back to its previous positions which u stored earlier. This is not a very good fix but still works.

[mlerner]

Did you come up with a fix for this?

[seiyria]

I did not. I ended up just using jQuerys sortable widgets to solve my problem.

[harminderbomrah]

This plugin is shit... i can just find one solution which i mentioned above.

[dustmoo]

Not the creator of the library but I created a fork and am trying to help maintain the original project since the creators have all but abandoned it.

The way that gridster is currently designed does not allow to contain the grid vertically.

To do that you need to use my fork here:

https://github.com/dustmoo/gridster.js

If you configure it like so it should do what you need:

$(".gridster ul").gridster({
    widget_margins: [5, 5],
    widget_base_dimensions: [50, 50],
    max_cols: 16,
    max_rows: 15, //Limiting rows only works if shift_larger_widgets_down is set to false
    shift_larger_widgets_down: false;
}).data('gridster');

Limiting rows only works if you disable my fork from shifting larger widgets down.

[hustcer]

@dustmoo Thank you !

[dustmoo]

@hustcer You are welcome! :)

[mlerner]

I'd recommending checking out Packery as well.

[dustmoo]

Nice library! Do you think they would take over gridster development? ;-)

[ndung]

@dustmoo
This is my js:

var gridster;
$(function(){
var log = document.getElementById('log');
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5],
max_cols: 3,
max_rows: 3,
draggable: {
start: function(e, ui, $widget) {
log.innerHTML = 'START position: ' + ui.position.top +' '+ ui.position.left + "
"+ log.innerHTML;
},
stop: function(e, ui, $widget) {
log.innerHTML = 'STOP position: ' + ui.position.top +' '+ ui.position.left + "
" + log.innerHTML;
}
}
}).data('gridster');
});

From your fork, I can get the value of stop position, but I can't get the value of start position. Can u help me? Because the current gridster can do this.
Thanks.

[harshmsp]

Helloe @dustmoo ,
I have checked this js file, but with using this js resize not works.
Can you please tell me is it works or not ?
Because above version of js file resize works correctly but when i have replaced with this js then max_rows works fine but resize not works.
Please give me your positive answer.

[harshmsp]

$(".gridster ul").gridster({
widget_margins: [5, 5],
widget_base_dimensions: [50, 50],
max_cols: 16,
max_rows: 15, //Limiting rows only works if shift_larger_widgets_down is set to false
shift_larger_widgets_down: false;
resize:{
enabled:true
}
}).data('gridster');

this not works

[dustmoo]

@harshmsp, would you setup an example so I can debug?