masonry / ui.sortable / ui.resizeable

[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]

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]

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]

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

[wavetydesigns]

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]

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]

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]

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]

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

[chayner]

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]

hi, the problem of using label instead of

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

[vfatia]

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]

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]

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

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]

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

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

[jwarzech]

@miguelfatia Thanks for the solution!

[franklinwise]

Hi David,

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

Franklin

[desandro]

@franklinwise Probably not going to happen for a while. See http://metafizzy.co/blog/mythical-drag-drop-multi-column-grid-plugin/

[franklinwise]

Thanks for the response David.

[icholy]

here's my attempt

http://jsfiddle.net/xKjUv/

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

[reyx]

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

[icholy]

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]

@ReyX I just pushed some significant improvements

[icholy]

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]

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]

@kubante try gridster

[kubante]

many thx.

[desandro]

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.

:fireworks: :cake: :gift_heart: :grey_exclamation: :sailboat: :beers: :cake: :gift_heart: :grey_exclamation: :sailboat: :beers: :fireworks: :gift_heart: :grey_exclamation: :sailboat: :beers: :fireworks: :cake: :grey_exclamation: :sailboat: :beers: :fireworks: :cake: :gift_heart: :sailboat: :beers: :fireworks: :cake: :gift_heart: :grey_exclamation: :beers: :fireworks: :cake: :gift_heart: :grey_exclamation: :sailboat:

[desandro]

jQuery Shapeshift is a great alternative, draggable masonry layouts

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