Question

I’m trying to move a model between two collections based on drag and drop events in the UI (from one “box” to another). Now when I remove the element from its original collection, it apparently ceases to exist because it doesn’t show up in the new collection either (if I comment out removal, the appearence in the other collection works).

I have the intuition that this is because of the idea that each model corresponds to a server side collection and removing something from a collection normally even goes back to the server to kill it. Here, however, I want my models to be a bit more free-floating. Is that possible? Am I using Backbone wrongly?

Update

Ok so this is an excerpt of my code. If necessary I can create a fiddle but maybe this helps to highlight what’s happening:

    drop: function(event, ui) {
        var item = ui.draggable.data("model");
        newcollection.add(item);
        console.log(item);
        oldcollection.remove(item);
        console.log(item);
    }

now, console output looks like this:

d {attributes: Object, _escapedAttributes: Object, cid: "c83", changed: Object, _silent: Object…}

d {_previousAttributes: Object, _pending: Object, _escapedAttributes: Object, changed: Object, _silent: Object…}

So apparently the model itself has changed while nothing else than its removal from the collection has happened. I see now it hasn’t actually “ceased to exist” but still – ?

Answer 1

Well it turns out I need to change the order of add and remove; otherwise the removal of the UI corresponding element is triggered both for the old and the new one… thanks for the comments though, helped nudge me into the right direction.