How do you target a cloned draggable element during the 'stop' event?

Question

I have a draggable list element that clones on drag and populates another list. When I drop the item I want to change the content of the newly dropped li element. The problem I have is that jQuery's this is still the original drag item and not the cloned item.

How do I target the newly cloned item specifically so I can change its content and not affect other items in the list?

Code is below. Thanks for any wisdom!

CSS:

<style>
#intro-clone, #assessment-clone {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 180px;
    display: inline-block;
}
#intro-statements, #assessment-statements {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 365px;
}
#intro-clone li, #assessment-clone li, #intro-statements li, #assessment-statements li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    min-height: 25px;
}
#intro-clone li, #assessment-clone li, #intro-statements li, #assessment-statements li {
    min-height: 25px;
    line-height: 1.2em;
}
.ui-state-highlight {
    min-height: 25px;
    line-height: 1.2em;
}
ul {
    padding: 6px 1px 1px 0 !important;
    min-height: 42px;
    background: silver;
    border-radius: 3px;
}
</style>

JS:

<script>
$(function() {
    $("#intro-statements, #assessment-statements").sortable({
        placeholder: "ui-state-highlight",
        revert: true
    });
    $( "#intro-clone li" ).draggable({
        drag: function() { $("#intro-clone li").css("width","158px"); },
        stop: function() {
            $("#intro-statements li").css({"width":"343px","height":"25px"}); // this is applied to ALL the li elements, including the cloned one
            console.log(this); // reference's the original drag element, not the clone
            window.setTimeout(function() { $(this).html("new content") }, 1000); // doesn't work!
        },
        connectToSortable: "#intro-statements",
        helper: "clone",
        revert: "invalid"
    });
    $( "#assessment-clone li" ).draggable({
        drag: function() { $("#assessment-clone li").css("width","158px"); },
        stop: function() {
            $("#assessment-statements li").css({"width":"343px","height":"50px"}).html("new content<br>new line");  // this is applied to ALL the li elements, including the cloned one
        },
        connectToSortable: "#assessment-statements",
        helper: "clone",
        revert: "invalid",
    });
    $("#intro-statements, #assessment-statements").disableSelection();

    $("#show").click(function() {
        var intros = {};
        $('li', 'ul.sort').each(function(i) {
            var $li = $(this);
            var $text = $li.text();
            var name = $li[0].tagName.toLowerCase();
            //intros[name + '-' + i] = $text;
            intros[i] = $text;
        });
        console.log(intros);
        $("#show").html(JSON.stringify(intros));
    });
});
</script>

HTML:

<ul id="intro-clone">
    <li class="ui-state-default">Intro item</li>
</ul>
<ul id="assessment-clone">
    <li class="ui-state-default">Assessment item</li>
</ul>
<br>
<br>
<ul id="intro-statements" class="sort">
</ul>
<br>
<ul id="assessment-statements" class="sort">
</ul>
<div id="show">SHOW</div>

Answer 1

Crazy how you spend forever trying to find the solution and then when you post for help, it just comes to you!

So this did the trick for me: I attached a class to the element on the drag event. When the new element is dropped I remove the class from the source element and target the class on the new cloned element, and make my changes to it. Finally I then remove the class from the cloned element to keep it unique.

Here's the updated js:

$( "#intro-clone li" ).draggable({
    drag: function() {
        $("#intro-clone li").css("width","158px").addClass("new"); // add the new class
    },
    stop: function() {
        $("#intro-clone li").removeClass("new"); // remove it again
        $("#intro-statements li.new").css({"width":"343px","height":"25px"});
        window.setTimeout(function() { $("#intro-statements li.new").html("new content") }, 1000); // make my changes to the cloned element
        window.setTimeout(function() { $("#intro-statements li").removeClass("new") }, 1500); // remove class so it is unique for the next clone
    },
    connectToSortable: "#intro-statements",
    helper: "clone",
    revert: "invalid"
});

This might be good code, it might not, but it solves my problem so I'm happy :)

Answer 2

You need to add stop to sortable method like below because sortable makes draggable and droppable together. I think it's better for you.

$("#intro-statements, #assessment-statements").sortable({
    placeholder: "ui-state-highlight",
    revert: true,
    stop: function(event, ui) {
        console.log(event.target);
    }
});