Hi, I am trying hard to make this work! I have a list of images inside a div which i make draggable. I also have a dialog which is triggered (open) when dragging starts. For some reason I cannot drop inside this dialog. I can drop everywhere else on the page except inside a dialog. here is my code:
$(document).ready(function(){
// Executed once all the page elements are loaded
//setup new person dialog
// Change overlay color and opacity
$('#sample').dialog({
//dialog options
autoOpen: false,
draggable: false,
modal: false,
show: 'explode',
closeOnEscape: true,
position: 'top',
minHeight: '400',
minWidth: '600',
width: 750,
title: "Some title",
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
$(".random-img").draggable(
{
cursor: "move",
helper: "clone",
opacity: "0.5",
zIndex: "2700",
containment: "document",
handle: ".random-img", // makes toolbar the dragable part
drag: function(ev, ui) {
$('#sample').dialog("open");
}
}
);
$("#sample").droppable(
{
accept: ".random-img",
tolerance: "touch",
drop: function(ev, ui)
{
var droppedItem = ui.draggable.clone().addClass('sclass');
$(this).append(droppedItem);
}
}
);
});
</script>
<html>
<head> Page test </head>
<body>
<div class="random-img">
<img src="images/someimage.jpg" />
</div>
<div id='sample'>
</div>
</body>
</html>
Any help or insight will be greatly appreciated.
Thanks