Prevent widget from being dragged outside of containing div? #117

Closed
seiyria opened this Issue Jan 25, 2013 · 14 comments

Comments

Projects
None yet
8 participants
@seiyria

seiyria commented Jan 25, 2013

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:

ss 2013-01-25 at 12 16 43

From looking like this:
ss 2013-01-25 at 12 22 14

@bostondevin

This comment has been minimized.

Show comment Hide comment
@bostondevin

bostondevin Feb 18, 2013

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

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

@harminderbomrah

This comment has been minimized.

Show comment Hide comment
@harminderbomrah

harminderbomrah Feb 26, 2013

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.

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

This comment has been minimized.

Show comment Hide comment
@mlerner

mlerner Apr 20, 2013

Did you come up with a fix for this?

mlerner commented Apr 20, 2013

Did you come up with a fix for this?

@seiyria

This comment has been minimized.

Show comment Hide comment
@seiyria

seiyria Apr 20, 2013

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

seiyria commented Apr 20, 2013

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

@harminderbomrah

This comment has been minimized.

Show comment Hide comment
@harminderbomrah

harminderbomrah Apr 20, 2013

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

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

@dustmoo

This comment has been minimized.

Show comment Hide comment
@dustmoo

dustmoo Apr 25, 2013

Contributor

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.

Contributor

dustmoo commented Apr 25, 2013

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

This comment has been minimized.

Show comment Hide comment
@hustcer

hustcer May 16, 2013

@dustmoo Thank you !

hustcer commented May 16, 2013

@dustmoo Thank you !

@dustmoo

This comment has been minimized.

Show comment Hide comment
@dustmoo

dustmoo May 16, 2013

Contributor

@hustcer You are welcome! :)

Contributor

dustmoo commented May 16, 2013

@hustcer You are welcome! :)

@dustmoo dustmoo closed this May 16, 2013

@mlerner

This comment has been minimized.

Show comment Hide comment
@mlerner

mlerner May 16, 2013

I'd recommending checking out Packery as well.

mlerner commented May 16, 2013

I'd recommending checking out Packery as well.

@dustmoo

This comment has been minimized.

Show comment Hide comment
@dustmoo

dustmoo May 16, 2013

Contributor

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

Contributor

dustmoo commented May 16, 2013

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

@ndung

This comment has been minimized.

Show comment Hide comment
@ndung

ndung Nov 12, 2013

@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.

ndung commented Nov 12, 2013

@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

This comment has been minimized.

Show comment Hide comment
@harshmsp

harshmsp Feb 25, 2015

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.

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

This comment has been minimized.

Show comment Hide comment
@harshmsp

harshmsp Feb 25, 2015

$(".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

$(".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

This comment has been minimized.

Show comment Hide comment
@dustmoo

dustmoo Feb 26, 2015

Contributor

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

Contributor

dustmoo commented Feb 26, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment