jquery draggable to sortable

Question

I've created a sortable list and a draggable item to add new items.

I have a remove button that I want to make visible when I add the new item from the draggable.

How do I wire the events up?

This is the element that gets dragged from the draggable to the sortable.

<a  id="btn"    class="ContentItemSelect"  >
    <span  title="Remove" class="ContentItemRemove" id="Remove"></span> 
</a>

Answer 1

We really need more of the markup and relevant javascript to give a useful answer, but in general you just assemble the required HTML and append it to the item you created.

A quick additonal note though - you're using suspiciously generic id's. You do know that you can only have one unique id per page, so once you've added a single element with an id of 'btn' and a span with an id of 'remove' you can't add any more with the same id to other dragged elements?

Answer 2

Sortable includes an option called receive, which allows you to define a function that will be called when an item is added.

Assuming what you are trying to do is unhide the span you can do something like the following. It should be fairly clear how to transfer it to another use case if that wasn't your intent though.

$("#sortable").sortable({
    receive: function(event, ui) {
        $("#" + $(ui.item).attr("id")).find(".ContentItemRemove").show();
    }
});

I am not entirely sure about the $("#" + $(ui.item).attr("id")) part, as it seems overly complex and obviously assumes that any object you add has a unique id (which it should anyway, but still worth mentioning). It worked fine in an old piece of code I've got, but I'm guessing it can be simplified.