grid doesnt deactivate droppable properly when using acceptWidgets

[nelsonad]

I have an issue when adding multiple external items via drag and drop. The first draggable item works well, the grid activates and shows the placeholder and moves existing nodes out of the way.

The problem is with subsequent items, the grid doesn't activate immediately like the first item. It will start working if the new dragged item is moved out and triggers the draggable dropout event.

I tracked it down to an issue with gridstack preventing droppable from calling deactivate after the item is dropped.

And I fixed it by changing gridstacks droppable accept function to check node._temporary

Before:

this.dd
  .droppable(self.container, {
     accept: function(el) {
          el = $(el);
          var node = el.data('_gridstack_node');
          if (node && node._grid === self) {
               return false;
          }
          return el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets);
   }
})

After:

this.dd
      .droppable(self.container, {
            accept: function(el) {
                 el = $(el);
                 var node = el.data('_gridstack_node');
                 if (node && !node._temporary && node._grid === self) {
                      return false;
                 }
                 return el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets);
             }
      })

[mandys]

Faced the same issue.
However, fix mentioned by you is no longer working.

When I try and drag it outside the bounds of the grid, dropout gets triggered and I can drag/drop in the grid again nicely.

Without that, I get stuck and error is thrown.

[mandys]

@nelsonad - forgot to tag you.

[petegibbins]

Looks like I'm experiencing the same thing - dragging a widget off a flyout menu into the gridstack, works the first time but not the second time. Unless you drag the widget right to the top of the screen, in this case it's under the top menu.
Will this one get fixed?

[nelsonad]

@petegibbins did you try making the change i posted above? It's still working for me

[petegibbins]

@nelsonad Hi - yep tried that but no luck for me. I'm using v1 of the framework, could you be using an older version where this works? See that @mandys says it's "no longer" working.

[nelsonad]

@petegibbins oh, ya maybe that's it, i'm using v0.3.0 =/

[petegibbins]

@nelsonad Tried on v0.3.0 still no dice unfortunately. The 'dropover' event does not get fired 2nd time around.

This line always returns undefined on the 2nd drag / drop.
var node = el.data('_gridstack_node');

[AaronRobson]

I have the same issue, do we know in which revision the workaround stopped working?

[lauantai]

Same issue...

[radiolips]

I thought this had been fixed in a merged PR on v1. @petegibbins you're using the newest version in the develop branch and still having this problem?

[benjamincfaustino]

Same Issue.

Please fix this issue. Thanks

@radiolips

[polenginlabu]

Same issue please fix thanks!

[radiolips]

This is working for me on v0.4.0, released yesterday. I'm seeing it work fine on the demo - http://gridstackjs.com/demo/two.html - I'm closing the ticket, but if someone has a specific problem, please let me know.

[jun1432]

I'm still experiencing this one see #940 every after dragstop and try adding a new widget on a flyout menu it triggers and error " Uncaught TypeError: Cannot set property '_grid of undefined" line 933 "node._grid = self; "

[mishrarajesh]

This is working for me on v0.4.0, released yesterday. I'm seeing it work fine on the demo - http://gridstackjs.com/demo/two.html - I'm closing the ticket, but if someone has a specific problem, please let me know.

I am still experiencing this issue in v0.4.0

[stefan2595]

@mishrarajesh @jun1432 @polenginlabu @benjamincfaustino
The fix for me was:
jquery/jquery-ui@2228050

[LaxmanTelang]

I am still facing this issue added below code :
this.dd
.droppable(self.container, {
accept: function(el) {
el = $(el);
var node = el.data('_gridstack_node');
if (node && !node._temporary && node._grid === self) {
return false;
}
return el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets);
}
})

Still not working for me . Please suggets me what to do now

[adumesny]

@LaxmanTelang can you provide a jsfidle sample showing the issue with latest code ?
use https://jsfiddle.net/adumesny/jqhkry7g as starting point.