Muuri: [Suggestion] Trigger draggability of one box on click and then disable it on drop.

[zelmandesign]

Hey there,

Firstly I must say this plugin is great.

I was wondering if this is possible. Can we make only one item from grid draggable on click and then disable draggability after item is dropped in place?

I bet there is a way to do that.

Many thanks!

[niklasramo]

Yep, should be doable. Try tinkering with dragStartPredicate.

[zelmandesign]

This is where I got so far altering your script from code pen
but no idea how to disable draggability on dragend

$('.draggable-trigger').click(function () {
var grid = new Muuri('.grid', {
dragEnabled: true,
dragStartPredicate: function (item, event) {
// Only one items is being dragged
if (grid.getItems().indexOf(item) === 0) {
return Muuri.ItemDrag.defaultStartPredicate(item, event);

    }
    // Prevent all items from being dragged.
    return false;
  }
});

$(this).parents('.item-content').addClass('draggable-border');
});

[niklasramo]

Did you mean something like this: https://codepen.io/niklasramo/pen/bLdQwR

[zelmandesign]

Not really. I wanted a box with a trigger button which triggers draggability only of this one box and when you drop it you can't drag it anymore. I figured it out tho. Was overthinking this.

This plugin is sweet. I can make a codepen later on if you like.

Thanks a lot !

`var grid = new Muuri(".grid", {
dragEnabled: true,
items: '.item',
dragStartPredicate: {
distance: 10,
delay: 100,
handle: '.dragbox'
}
});

$(function() {
$(".draggable-trigger").on("click", function(e) {
$(this).parents('.item').addClass('dragbox');
$(this).parents('.item-content').addClass('draggable-border');
$('.dropdown-menu').removeClass('show');
e.stopPropagation()
});
$(document).on("click", function(e) {
if ($(e.target).is(".draggable-border") === false) {
$(".item-content").removeClass("draggable-border");
$(".item").removeClass("dragbox");
}
});
});`

[niklasramo]

a box with a trigger button which triggers draggability only of this one box and when you drop it you can't drag it anymore

Hmmm.. but that's exactly what my codepen example does. Well, yeah, except in my example clicking the item will enable dragging for the item. There's no specific toggle inside the item. Or am I missing something here?

[zelmandesign]

I don't think so. In your codepen none of the blocks is movable atm at least for me?

[niklasramo]

Well yeah, you have to click the item first and _then_ it becomes draggable. If that's not happening then there's a bug I'd be interested to sort out.

[zelmandesign]

Oh yeah I didn't notice. That's amazing. Well you did better job than I did for sure :) I'm gonna test it.

[niklasramo]

By the way, if possible please give this issue a bit better title so other folks can find this issue too if they're struggling with similar issue ;)

[zelmandesign]

Will do in a sec.

Thanks!

[niklasramo]

This issue seems to be resolved -> closing.