I have used the droppable demo from the download(jQuery UI Droppable - Simple photo manager). What i have done is cloned the image and dropped into the droppable region. So i can have multiple images of the same object in the droppable region. This works fine. Now what i want is, i want to remove the images by clicking on the in the cloned object. Or rather i want to add more functionalites to the dropped objects which has been cloned; like dragging the dropped object to specific positions. Can anyone please help me? I know the demo application works fine. But the functionality does not work when the object is cloned.
The Draggable
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr ui-draggable">
<h5 class="ui-widget-header">BLUE</h5>
<img src="blue.png" width="96" height="72" />
<a href="Recombo456.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="" title="Add to outfit" class="ui-icon ui-icon-plusthick">Add to Outfit</a>
</li>
</ul>
The cloned "ui-icon-plusthick" to "ui-icon-closethick" is something i added when it was dropped.
<ul class="gallery ui-helper-reset">
<li class="ui-widget-content ui-corner-tr ui-draggable" style="width: 96px; display: list-item;">
<h5 class="ui-widget-header">BLUE</h5>
<img width="96" height="72" src="blue.png" style="height: 72px; display: inline;"/>
<a class="ui-icon ui-icon-zoomin" title="View larger image" href="Recombo456.jpg">View larger</a>
<a class="ui-icon ui-icon-closethick" title="Delete" href="">Delete </a>
</li>
How can I call a function for the “delete” and “View Larger” from the dropped region? Any guidance is highly appreciated. Thanks in advance.