jqueryui draggable/sortable not working when the sortable changes size?

Question

I have an item being dragged into a sortable. The sortable's size is dynamic, and grows when dragging starts. The sortable's new larger area doesn't seem to count as a valid dropzone the way I'd expect, and only the initial area is valid for dropping.

Is there a way to tell the draggable/sortable to "update"?

Essentially, something like this:

$('.draggable').draggable({
    connectToSortable: ".sortable",
    start: function () {
        $('.sortable').width(300);
    }
});

I have a jsfiddle demonstrating this issue: http://jsfiddle.net/o4oLcu0g/

Twisty Twisty · Accepted Answer · 2016-03-08T19:01:53

Welcome to Stack Overflow. I updated your fiddle with an answer:

http://jsfiddle.net/Twisty/o4oLcu0g/1/

I made one minor change:

.group {
  background-color: gray;
  border: 1px solid #000;
  margin: 5px;
  padding: 5px;
  max-width: 100px;
}

sortable is trying to add the object to the right or left of the current elements as well as above and below. Setting the max-width will prvent the growth.

jqueryui draggable/sortable not working when the sortable changes size?

1 Answers