Temporary existence of draggable/sortable helper disrupt stored IDs

Question

I am working off of a Draggable example where you can drag a copies of one element into a sortable list of other elements. What I want to do is assign every new element dragged into the list an ID so that they can be distinguished from one another. The problem seems to be that when you start moving these elements around, it looks like you are dragging that element, but in actuality you are dragging a spawned helper that just looks like it. Initially I was setting newly placed elements' IDs on Sortable stop

model = [];
$( "#sortable" ).sortable({
      revert: true,
      stop: function(event, ui){
          ui.item[0].id = id++;
          model.push(id);
        }
        console.log(model);        
      }
    });

In this case the html element stored in the ui.item[0] was the element that will be kept in the list, and not its helper clone. The issue is, as I said before, the moment you try to move it again, this element seems to be destroyed and a new one will be created. The new element will be given a new ID and any functionality I had tied to that original ID elsewhere will now break because the selector will be incorrect. I could set a temporary variable to hold the ID while I am dragging within sortable, or I could perpetuate the new ID through my project, but I am hoping that Sortable already has something built in. Does Sortable have a way to deal with this cloning issue?

My code is available in this plunker.

Please create a fiddle of your code and try to explain clearly what exactly your problem is ! — Rahul Gupta
@RahulGupta I've added the plunker with my code, and as I said in the question when I add new items to the sortable list, I give them unique IDs. When I move that element again, a copy is created that doesn't maintain that ID. I need that ID to stay tied to the element. — EasilyBaffled

Rahul Gupta Rahul Gupta · Accepted Answer · 2014-07-25T13:15:34

DEMO JS code:

var id=1;
$("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
        if (ui.item.hasClass("new-item")) {
            // This is a new item
            ui.item.removeClass("new-item");
            ui.item.html("New element id = "+id);
            ui.item.attr('id', id);
            id++;
        }
    }
});
$(".new-item").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
});
$("ul, li").disableSelection();

HTML:

<ul>
    <li class="new-item ui-state-highlight">Drag me down</li>
</ul>

<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

Notice: Added a new class new-item to the draggable element, without which the things won't work !

Temporary existence of draggable/sortable helper disrupt stored IDs

1 Answers