Try this…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/150% verdana, arial, helvetica, sans-serif;
text-align: center;
}
#wrapper {
width: 45em;
height: 34.375em;
margin: auto;
background-color: #fff;
text-align: left;
}
#options, #frame {
float: left;
width: 12.5em;
height: 100%;
border: 1px solid black;
box-sizing: border-box;
}
#frame {
float: right;
width: 32.25em;
}
#drag1, #drag2, #drag3 {
width: 6.25em;
height: 6.25em;
margin: 1em auto 0;
background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
background-size: 100% 100%;
}
#drag2 {
background-image: url(https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg);
}
#drag3 {
background-image: url(https://static.pexels.com/photos/34950/pexels-photo.jpg);
}
.ui-draggable-helperMoving {
width: 6.25em;
height: 6.25em;
padding: 0.375em;
border: 1px dotted #000;
}
.ui-draggable-helperStoped {
width: 0.3125em;
height: 0.3125em;
border: 1px solid #000;
}
.dragged1, .dragged2, .dragged3 {
position: absolute;
width: 18.75em;
height: 18.75em;
background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
background-size: 100% 100%;
}
.dragged2 {
background-image: url(https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg);
}
.dragged3 {
background-image: url(https://static.pexels.com/photos/34950/pexels-photo.jpg);
}
#element{
border: 1px solid #f00;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="options">
<div id="drag1" class="drag"></div>
<div id="drag2" class="drag"></div>
<div id="drag3" class="drag"></div>
</div>
<div id="frame"></div>
</div>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.4.2');
google.load('jqueryui', '1.7.2');
</script>
<script>
$(document).ready(function(){
//Counter
counter = 0;
//Make element draggable
$('.drag').draggable({
helper:'clone',
containment: 'frame',
//When first dragged
stop:function(ev, ui) {
var pos = $(ui.helper).offset();
objName = '#clonediv' + counter
$(objName).css({'left':pos.left, 'top':pos.top});
$(objName).removeClass('drag');
//When an existiung object is dragged
$(objName).draggable({
containment: 'parent',
stop:function(ev, ui) {
var pos=$(ui.helper).offset();
console.log($(this).attr('id'));
console.log(pos.left);
console.log(pos.top);
}
});
}
});
//Make element droppable
$('#frame').droppable({
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
counter ++;
var element = $(ui.draggable).clone();
element.addClass('tempclass');
$(this).append(element);
$('.tempclass').attr('id',"clonediv"+counter);
$('#clonediv' + counter).removeClass('tempclass');
//Get the dynamically item id
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/);
itemDragged = 'dragged' + RegExp.$1;
console.log(itemDragged);
$('#clonediv'+counter).addClass(itemDragged);
}
var containment = $( '#frame' ).resizable( 'option', 'containment' );
// Setter
$( '#frame' ).resizable( 'option', 'containment', 'parent' );
}
});
});
</script>
</body>
</html>coothead
