masonry / ui.sortable / ui.resizeable #45

Closed
wavetydesigns opened this Issue Nov 15, 2010 · 29 comments

Comments

@wavetydesigns

I've been able to get masonry working with jquery.ui.sortable and jquery.ui.resizeable all at the same time.

In my case, it required the following:

  • Setting the option columnWidth to 1.
  • Giving all my sortable objects a specific class. (i.e. class='test')
  • Assigning the masonry option itemSelector to that class. (i.e. itemSelector: '.test')
  • Assign the same class to the generated sortable placeholder.
  • Remove that class from the helper object, and the item selected.
  • Re-apply that class to the item selected once dropped.
  • Re-run jquery.masonry on the sortable's sort option.
  • Re-run jquery.masonry on the sortable's stop option.
  • Re-run jquery.masonry on the resizeable's resize option.

No changes to the actual code was needed.

*Tested in Chrome (fast - no performance hit), IE8 (slow, but works), Firefox (fast)

@desandro

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Nov 16, 2010

Owner

Wow. I would love to see that in action. I didn't design the plugin to be compatible with jQuery UI. In fact, it might actually be designed to break it. I'm pretty impressed if you pulled it off.

Owner

desandro commented Nov 16, 2010

Wow. I would love to see that in action. I didn't design the plugin to be compatible with jQuery UI. In fact, it might actually be designed to break it. I'm pretty impressed if you pulled it off.

@wavetydesigns

This comment has been minimized.

Show comment
Hide comment
@wavetydesigns

wavetydesigns Nov 16, 2010

Here is a sample I setup for you. Again, tested in the 3 browsers I mentioned above. Hopefully this will help you in testing your plug-in, as you can get real-time feedback on how it sorts when boxes move/resize.

http://tyler-designs.com/masonry-ui/

My use may not fit what everyone needs the plug-in for, but it worked well for what I needed so I am using it on my site currently just like this.

Here is a sample I setup for you. Again, tested in the 3 browsers I mentioned above. Hopefully this will help you in testing your plug-in, as you can get real-time feedback on how it sorts when boxes move/resize.

http://tyler-designs.com/masonry-ui/

My use may not fit what everyone needs the plug-in for, but it worked well for what I needed so I am using it on my site currently just like this.

@desandro

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Nov 16, 2010

Owner

Sorry to say that I do not believe masonry layout is actually working. The smaller boxes should fit inside all that empty space

Owner

desandro commented Nov 16, 2010

Sorry to say that I do not believe masonry layout is actually working. The smaller boxes should fit inside all that empty space

@wavetydesigns

This comment has been minimized.

Show comment
Hide comment
@wavetydesigns

wavetydesigns Nov 16, 2010

I can't quite see the order list below the boxes on your screenie, but I tried to duplicate it and it works for me. Can I ask what browser you used?

*Edit, I was able to duplicate your screenie. So, I'm assuming its not working to its fullest. Because I feel like its definitely working at times. If you look at my sample again, I've placed a standard sortable/resizable (with float:left) next to the masonry'd one. There is a huge difference in how it reacts, so I'm curious as to what is being missed by it.

I can't quite see the order list below the boxes on your screenie, but I tried to duplicate it and it works for me. Can I ask what browser you used?

*Edit, I was able to duplicate your screenie. So, I'm assuming its not working to its fullest. Because I feel like its definitely working at times. If you look at my sample again, I've placed a standard sortable/resizable (with float:left) next to the masonry'd one. There is a huge difference in how it reacts, so I'm curious as to what is being missed by it.

@desandro

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Nov 21, 2010

Owner

After playing around with it a bit more, I'm happy to say that indeed it works. My only concern is that the drag n drop interaction is not intuitive as one would expect. The layout algorithm that Masonry uses isn't a general top-down / left-right direction, so sometimes when you pull a box over to a new spot, it appears where you didn't expect it.

Regardless, this is a commendable acheivement. Thanks so much for pushing the capabilities of the plugin :)

Owner

desandro commented Nov 21, 2010

After playing around with it a bit more, I'm happy to say that indeed it works. My only concern is that the drag n drop interaction is not intuitive as one would expect. The layout algorithm that Masonry uses isn't a general top-down / left-right direction, so sometimes when you pull a box over to a new spot, it appears where you didn't expect it.

Regardless, this is a commendable acheivement. Thanks so much for pushing the capabilities of the plugin :)

@nodeGarden

This comment has been minimized.

Show comment
Hide comment
@nodeGarden

nodeGarden Feb 2, 2011

I am trying to do the same thing (use masonry for positioning, but allow user to rearrange). However, the demo you show is not working for me. Is there something that changed? Desandro, is there any plans for sortable/draggable support in masonry?

I am trying to do the same thing (use masonry for positioning, but allow user to rearrange). However, the demo you show is not working for me. Is there something that changed? Desandro, is there any plans for sortable/draggable support in masonry?

@desandro

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Feb 2, 2011

Owner

Dragging will continue be unsupported in Masonry.

The closest solution is the jQuery Sortable widget - Grid

Seems like there is a big enough demand for drag-n-droppable Masonry. From the developer's perspective, Masonry's layout algorithm cannot be reverse engineered to support this feature. I have considered building a separate draggable grid plugin - but that's for another day.

Owner

desandro commented Feb 2, 2011

Dragging will continue be unsupported in Masonry.

The closest solution is the jQuery Sortable widget - Grid

Seems like there is a big enough demand for drag-n-droppable Masonry. From the developer's perspective, Masonry's layout algorithm cannot be reverse engineered to support this feature. I have considered building a separate draggable grid plugin - but that's for another day.

@nodeGarden

This comment has been minimized.

Show comment
Hide comment
@nodeGarden

nodeGarden Feb 2, 2011

Oh. Yeah, that css float is what I started with before Masonry, but I need to support multiple heights. Thanks.

Oh. Yeah, that css float is what I started with before Masonry, but I need to support multiple heights. Thanks.

@chayner

This comment has been minimized.

Show comment
Hide comment
@chayner

chayner Feb 16, 2011

I'm thinking about just having a "move up" and "move down" buttons for each object that would then refresh the Masonry after moving the item up or down in the DOM. Not quite as elegant as dragging and dropping, but would be able to work without any plugin hacking.

chayner commented Feb 16, 2011

I'm thinking about just having a "move up" and "move down" buttons for each object that would then refresh the Masonry after moving the item up or down in the DOM. Not quite as elegant as dragging and dropping, but would be able to work without any plugin hacking.

@kurairizumu

This comment has been minimized.

Show comment
Hide comment
@kurairizumu

kurairizumu Oct 17, 2011

hi, the problem of using label instead of

is that label is not auto resizeable (it will not fit to the box).. right?

hi, the problem of using label instead of

is that label is not auto resizeable (it will not fit to the box).. right?

@vfatia

This comment has been minimized.

Show comment
Hide comment
@vfatia

vfatia Jan 17, 2012

Hi,

I was able to get away with adding drag and drop to masonry in a fairly good manner.
But the layout is simpler than the proposed test page here.

Anyway I was able, out of box to improve performance a bit, mostly by using change instead of sort.
Cutting and pasting the core code:

init: function () 
{
    cards.list.all.addClass('layout-card');
    cards.makeSortable(groups.list.all.children('.cards'));
    cards.applyMasonry(groups.list.all.children('.cards'));
},

applyMasonry: function (t) 
{
    t.masonry({
        itemSelector:       '.layout-card',
        isResizable:        true    
    })
},

makeSortable: function (t) 
{
    t.sortable({
        distance:                   12,
        forcePlaceholderSize:       true,
        items:                  '.layout-card',
        placeholder:                'card-sortable-placeholder layout-card',
        tolerance:                  'pointer',
        start:                  function(event, ui) {
                                    ui.item.addClass('dragging').removeClass('layout-card');
                                    ui.item.parent().masonry('reload')
                                },
        change:                 function(event, ui) {
                                    ui.item.parent().masonry('reload');
                                },
        stop:                   function(event, ui) { 
                                    ui.item.removeClass('dragging').addClass('layout-card');
                                    ui.item.parent().masonry('reload');
                                },
    });
}

The code/app should go live in the next few days, if anyone is interested I can buzz you later ;)

vfatia commented Jan 17, 2012

Hi,

I was able to get away with adding drag and drop to masonry in a fairly good manner.
But the layout is simpler than the proposed test page here.

Anyway I was able, out of box to improve performance a bit, mostly by using change instead of sort.
Cutting and pasting the core code:

init: function () 
{
    cards.list.all.addClass('layout-card');
    cards.makeSortable(groups.list.all.children('.cards'));
    cards.applyMasonry(groups.list.all.children('.cards'));
},

applyMasonry: function (t) 
{
    t.masonry({
        itemSelector:       '.layout-card',
        isResizable:        true    
    })
},

makeSortable: function (t) 
{
    t.sortable({
        distance:                   12,
        forcePlaceholderSize:       true,
        items:                  '.layout-card',
        placeholder:                'card-sortable-placeholder layout-card',
        tolerance:                  'pointer',
        start:                  function(event, ui) {
                                    ui.item.addClass('dragging').removeClass('layout-card');
                                    ui.item.parent().masonry('reload')
                                },
        change:                 function(event, ui) {
                                    ui.item.parent().masonry('reload');
                                },
        stop:                   function(event, ui) { 
                                    ui.item.removeClass('dragging').addClass('layout-card');
                                    ui.item.parent().masonry('reload');
                                },
    });
}

The code/app should go live in the next few days, if anyone is interested I can buzz you later ;)

@nodeGarden

This comment has been minimized.

Show comment
Hide comment
@nodeGarden

nodeGarden Jan 17, 2012

I'd personally love to see this as I've put my project on hold for a bit, so could still use a solution.

I'd personally love to see this as I've put my project on hold for a bit, so could still use a solution.

@GrantCuster

This comment has been minimized.

Show comment
Hide comment
@GrantCuster

GrantCuster Jan 20, 2012

@miguelfatia's solution worked great for me in a two-column layout where all the items have a fixed with. The ordering gets a little unpredictable when you have more than two columns but it works pretty well even then.

@miguelfatia's solution worked great for me in a two-column layout where all the items have a fixed with. The ordering gets a little unpredictable when you have more than two columns but it works pretty well even then.

@vfatia

This comment has been minimized.

Show comment
Hide comment
@vfatia

vfatia Jan 21, 2012

The release is expected next week, but everything will be compressed so I have created a jsfiddle with a quick demo ;)

http://jsfiddle.net/XMfwZ/

On the order tidbit, I agree, but then again Masonry by itself already shuffles things a bit. My main interest is/was visual coherence.

cheers!

vfatia commented Jan 21, 2012

The release is expected next week, but everything will be compressed so I have created a jsfiddle with a quick demo ;)

http://jsfiddle.net/XMfwZ/

On the order tidbit, I agree, but then again Masonry by itself already shuffles things a bit. My main interest is/was visual coherence.

cheers!

@desandro

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Jan 21, 2012

Owner

Iiiiinnnnnnnnteresting. It sorta kinda works with a brick that spans two columns as well

http://jsfiddle.net/desandro/XMfwZ/1/

Owner

desandro commented Jan 21, 2012

Iiiiinnnnnnnnteresting. It sorta kinda works with a brick that spans two columns as well

http://jsfiddle.net/desandro/XMfwZ/1/

@jwarzech

This comment has been minimized.

Show comment
Hide comment
@jwarzech

jwarzech May 9, 2012

@miguelfatia Thanks for the solution!

jwarzech commented May 9, 2012

@miguelfatia Thanks for the solution!

@franklinwise

This comment has been minimized.

Show comment
Hide comment
@franklinwise

franklinwise Jun 12, 2012

Hi David,

I'm know you slammed, but would be awesome if you could knock out a drag and drop grid framework.

Franklin

Hi David,

I'm know you slammed, but would be awesome if you could knock out a drag and drop grid framework.

Franklin

@desandro

This comment has been minimized.

Show comment
Hide comment
@franklinwise

This comment has been minimized.

Show comment
Hide comment
@franklinwise

franklinwise Jun 13, 2012

Thanks for the response David.

Thanks for the response David.

@icholy

This comment has been minimized.

Show comment
Hide comment
@icholy

icholy Jun 21, 2012

here's my attempt

http://jsfiddle.net/xKjUv/

Edit: consider this a POC. It has a tone of problems atm.

icholy commented Jun 21, 2012

here's my attempt

http://jsfiddle.net/xKjUv/

Edit: consider this a POC. It has a tone of problems atm.

@reyx

This comment has been minimized.

Show comment
Hide comment
@reyx

reyx Jun 22, 2012

@icholy You made it! I'll work on your solution!

reyx commented Jun 22, 2012

@icholy You made it! I'll work on your solution!

@icholy

This comment has been minimized.

Show comment
Hide comment
@icholy

icholy Jun 22, 2012

slightly smarter version http://jsfiddle.net/qU2KW/

Edit: If you don't see the difference, it's because the old fiddle is also running the newer version.

icholy commented Jun 22, 2012

slightly smarter version http://jsfiddle.net/qU2KW/

Edit: If you don't see the difference, it's because the old fiddle is also running the newer version.

@icholy

This comment has been minimized.

Show comment
Hide comment
@icholy

icholy Jun 22, 2012

@reyx I just pushed some significant improvements

icholy commented Jun 22, 2012

@reyx I just pushed some significant improvements

@icholy

This comment has been minimized.

Show comment
Hide comment
@icholy

icholy Jun 23, 2012

Just added a brick 'ghosting' feature so if you hover over a spot without dropping you get a ghost showing you where it will be placed.

Demo: http://jsfiddle.net/ctd7N/1/

icholy commented Jun 23, 2012

Just added a brick 'ghosting' feature so if you hover over a spot without dropping you get a ghost showing you where it will be placed.

Demo: http://jsfiddle.net/ctd7N/1/

@kubante

This comment has been minimized.

Show comment
Hide comment
@kubante

kubante Aug 12, 2012

Hi there,

thanks for this, simply awsome.

I am a newb. That said, i am struggling to make this work with infinite scroll. It works for my first page, but not for any element loaded by infinite scroll.

reloading masonry for new infinite scroll elements like this: $container.masonry( 'appended', $newElems, true );

shouldnt this trigger masonry as defined before the infinite scrol (with your params isDraggable : true,
dragHandleSelector: '.handle',
dragClass: 'dragging')

??

Any hint really appreciated.

kubante commented Aug 12, 2012

Hi there,

thanks for this, simply awsome.

I am a newb. That said, i am struggling to make this work with infinite scroll. It works for my first page, but not for any element loaded by infinite scroll.

reloading masonry for new infinite scroll elements like this: $container.masonry( 'appended', $newElems, true );

shouldnt this trigger masonry as defined before the infinite scrol (with your params isDraggable : true,
dragHandleSelector: '.handle',
dragClass: 'dragging')

??

Any hint really appreciated.

@icholy

This comment has been minimized.

Show comment
Hide comment
@kubante

This comment has been minimized.

Show comment
Hide comment
@kubante

kubante Aug 12, 2012

many thx.

kubante commented Aug 12, 2012

many thx.

@desandro

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Apr 15, 2013

Owner

Packery is out http://packery.metafizzy.co It has support for draggable interactions

Packery is a JavaScript layout library that uses a bin-packing algorithm. This is a fancy way of saying “it fills empty gaps.”

Masonry will most likely never support draggable interactions. Please use Packery instead. We can now close this issue forever.

🎆 🍰 💝 ⛵️ 🍻
🍰 💝 ⛵️ 🍻 🎆
💝 ⛵️ 🍻 🎆 🍰
⛵️ 🍻 🎆 🍰 💝
⛵️ 🍻 🎆 🍰 💝
🍻 🎆 🍰 💝 ⛵️

Owner

desandro commented Apr 15, 2013

Packery is out http://packery.metafizzy.co It has support for draggable interactions

Packery is a JavaScript layout library that uses a bin-packing algorithm. This is a fancy way of saying “it fills empty gaps.”

Masonry will most likely never support draggable interactions. Please use Packery instead. We can now close this issue forever.

🎆 🍰 💝 ⛵️ 🍻
🍰 💝 ⛵️ 🍻 🎆
💝 ⛵️ 🍻 🎆 🍰
⛵️ 🍻 🎆 🍰 💝
⛵️ 🍻 🎆 🍰 💝
🍻 🎆 🍰 💝 ⛵️

@desandro desandro closed this Apr 15, 2013

@desandro

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Apr 23, 2013

Owner

jQuery Shapeshift is a great alternative, draggable masonry layouts

http://mcpants.github.io/jquery.shapeshift/

Owner

desandro commented Apr 23, 2013

jQuery Shapeshift is a great alternative, draggable masonry layouts

http://mcpants.github.io/jquery.shapeshift/

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