masonry / ui.sortable / ui.resizeable #45

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

Projects

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

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

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
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 :)

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

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

@miguelfatia

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.

@miguelfatia

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
Owner

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

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

@kubante

many thx.

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

🎆 🍰 💝 🍻
🍰 💝 🍻 🎆
💝 🍻 🎆 🍰
🍻 🎆 🍰 💝
🍻 🎆 🍰 💝
🍻 🎆 🍰 💝

@desandro desandro closed this Apr 15, 2013
@desandro
Owner

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