Step 1
Add id
attribute to clones to indentify them.
...
drop: function (event, ui) {
var $clone = ui.helper.clone();
// Give the clone an ID to indentify it.
$clone.attr('id', 'clone' + $('.inside-droppable').length);
if (!$clone.is('.inside-droppable')) {
...
Step 2
Create a popup windows to show clone's property:
...
<br>
<div id="droppable"></div>
<!-- Create a popup window -->
<div id="property-window">
Put textboxes, or anything you want here:<br/>
ID: <input id="cloneName" type="text"/>
</div>
style it:
...
#property-window {
background-color: white;
border: 1px solid;
position: absolute;
left: 0;
top: 0;
width: 200px;
padding: 10px;
display: none;
}
and make it draggable
...
$(".wall4").draggable({
revert: "invalid",
helper: "clone"
});
// Make property window draggable
$("#property-window").draggable();
Step 3
Add event handler to open the popup window:
$('body').on('click','.inside-droppable', function() {
var target = $(this);
$('#property-window').css({
// Set position
top: target.position().top,
left: target.position().left + target.width(),
// Show
display: 'block'
});
// Update the value
$('#property-window input#cloneName').val(target[0].id);
});
Here is a working demo: http://jsfiddle.net/trungdq88/qRM4R/
Hope this will help you, and don't forget to create a button to close the popup YOURSELF, good luck!