Sortable: When dragging items to another list the dragged item reappears

[beazergood]

Hello, I am trying to implement the sortable library via the angular-legacy wrapper and I'm experiencing the same issue as this SO post (http://stackoverflow.com/questions/39536502/cant-get-rubaxa-angular-legacy-sortablejs-to-move-items-between-lists) which doesn't have an answer and was wondering if anyone could help?

I have created a jsbin bellow which demonstrates my issue: each time I drag an item out of a list it reappears.
http://jsbin.com/yuvucim/edit?html,js,output

Any help/pointers would be greatly appreciated! 💯

(I would've created an SO post but no doubt I'll get shouted at for duping an answer and I don't have high enough reputation to comment on that post and I know this probably isn't the correct place either!)

[aintJoshinya]

let me preface this with I have never really used angular.

it looks like, for some reason, the "onAdd" event had "clone" set to true, even though it shouldn't have been.

while this feels hacky and isn't solving the underlying problem ( why is clone set to true when it SHOULD be false), you can correct the issue by altering the event data:

onAdd: function ( /**Event*/ evt) { evt.clone = false; _sync(evt); _emitEvent(evt, removed); scope.$apply(); },

I cloned your code and added the modification shown above so you can see the results.

http://jsbin.com/janunidepi/1/edit?html,js,output

hopefully this is enough to get you started and determine the actual cause of the erroneous clone value.

[beazergood]

@aintJoshinya thanks for taking a look. I'm not sure what you mean though, clone isn't being set to true in the onAdd function...
onAdd: function ( /**Event*/ evt) { _sync(evt); _emitEvent(evt, removed); scope.$apply(); },

I'm not aware of setting the clone property at all so far. I just want to get the very basics working before tweaking the 'put' and 'pull' settings. Just to clarify, I haven't touched the ng-sortable code at all, that's a copy of the current latest version 0.4.1

[aintJoshinya]

is it not showing up for you in the jsbin link I left? hmmm, maybe I cloned it incorrectly.

here's a screenshot of what I'm talking about. hopefully this helps. in the html section of the jsbin, there's some javascript. it looks like it's the angular 1.x module code. In that code, towards the bottom, on line 222, there is the onAdd event handler. on line 223, I hard coded evt.clone to be false, as it was coming in as true.

this is likely a bug with the angular 1.x module code, but I have not thoroughly examined all of it. you could submit a bug on that project and hopefully someone more familiar with the code could help resolve it.

in general, with sortable.js and multiple lists, you use the "put" and "pull" settings to determine which lists can have data used/added/removed/etc (see the group options). Pull can also be set to "clone", which clones items instead of moving them from one list to another. I'm assuming that clone is being set incorrectly for some reason, as it looks like in your code, you only set pull to true.

as a side note, based on this example from the documentation, it looks like group settings should be declared like below. I left your original in there, just commented out. This, unfortunately, still did not solve the issue, though...

[beazergood]

@aintJoshinya ok, thanks for those points. I don't know where that evt.clone property has come from, I've just run it in my project and can see a cloned property but not a clone: true one.
I have updated my group objects to that structure (I had them like that initially and then saw the other variation somewhere) and still no joy.

I've re-read the issues on the legacy module and looks like this thread is a very similar issue https://github.com/SortableJS/angular-legacy-sortablejs/issues/29

Thanks again for taking the time to look, much appreciated 👍

[lbecken]

Hello. I am working on a library for Angular 1.x that uses Sortable.js, and was having issues with Angular ng-repeat comments and the DOM manipulation of Sortable.js. So I am trying to use the wrapper instead (angular-legacy-sortablejs-maintained).

After migrating, I came across this same issue of dragging and always having a clone "left behind", no matter what I had set in group. From what I was able to gather, evt.clone is being set by Sortable.js in _onDragStart(), but actually because of group.checkFull(), which in the newer version of Sortable.js (1.5.1) is checking only against true or false, not the "clone" string anymore. But group.checkFull() is used both in _onDragStart(), which I need to be false so it doesn't clone the element, as well as in _onDragOver(), which is when the element is being dragged and I need it to be true to be able to drag the element.

I saw that checkFull() has 4 parameters:from, to, dragEl and event. So this is what I did when defining pull in the group object:

group: {
  name: "components",
  pull: function(to, from, dragEl, evt) {
    if(evt.type === 'dragstart') {
      return false;
    }
    return true;
  }
}

So basically I was able to solve my use case by checking which type of event is under way.

I hope this might help.

[bhecht2]

Having the same problem as well on version 1.5.1.