drag and dropped with resizable in dropped area - drag-and-drop

Question

<link rel="stylesheet" href="themes/base/jquery-ui.css" />
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script src="jquery-1.8.2.js"></script>
<script src="ui/jquery-ui.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="ui/jquery.ui.droppable.js"></script>
<script src="ui/jquery.ui.resizable.js"></script>
<script src="ui/jquery.ui.position.js"></script>
<script src="ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="demos.css">
<style>
#gallery { float: left; width:640px; min-height: 12em; padding-top:5px; padding-left:12px } * html #gallery { height: 12em; } /* IE6 */
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left; width: 96px; padding: 0.3em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: left; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 100%; cursor: move; }
#trash { float: right; width: 100%; min-height: 50em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
#trash h4 .ui-icon { float: left; }
#trash .gallery h5 { display: none; }
</style>
<script>
$(function() {
// there's the gallery and the trash
var $gallery = $( "#gallery" ),
$trash = $( "#trash" );
// let the gallery items be draggable
$( "li", $gallery ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move",
scroll: false,
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
scroll: false,
tolerance: "fit",
drop: function( event, ui ) {
deleteImage( ui.draggable );
$("li",$trash).draggable({ containment: 'parent' ,cursor: 'crosshair', revert:false});//for dragable the image
}
});
//let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: "#trash li",
activeClass: "custom-state-active",
scroll: false,
drop: function( event, ui ) {
recycleImage( ui.draggable );
},
});
// image deletion function
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Click To Move in Gallery' class='ui-icon ui-icon-refresh'>Click To Move in Gallery</a>";
function deleteImage( $item ) {
$item.fadeOut(function() {
var $list = $( "ul", $trash ).length ?
$( "ul", $trash ) :
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
$item.find( "a.ui-icon-trash" ).remove();
$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
//$item.animate({ width: "48px" }).find( "img" ).animate({ height: "36px" });
});
//resizing imge and getting it width and height START START
var res_id = $($item).attr("id");//get li/image id dropprd hear
$("#"+res_id).resizable({
alsoResize:'#img_'+res_id,
maxHeight: 400,
maxWidth: 400,
minHeight: 10,
minWidth: 10 ,
stop: function(event, ui){
var wid = ui.size.width;//size of image after resize width
var hei = ui.size.height;//size of image after resize height
//alert(hei+'='+wid);
}
});//resizing image and getting it width and height END END
});
}
// image recycle function
var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
function recycleImage( $item ) {
$item.fadeOut(function() {
$item
.find( "a.ui-icon-refresh" )
.remove()
.end()
.css( "width", "96px")
.append( trash_icon )
.find( "img" )
.css( "height", "72px" )
.css("width", "96px")
.end()
.appendTo( $gallery )
.fadeIn();
//.resizable({revert:"false"});
//ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage( $link ) {
var src = $link.attr( "href" ),
title = $link.siblings( "img" ).attr( "alt" ),
$modal = $( "img[src$='" + src + "']" );
if ( $modal.length ) {
$modal.dialog( "open" );
} else {
var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
.attr( "src", src ).appendTo( "body" );
setTimeout(function() {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1 );
}
}
// resolve the icons behavior with event delegation
$( "ul.gallery > li" ).click(function( event ) {
var $item = $( this ),
$target = $( event.target );
if ( $target.is( "a.ui-icon-trash" ) ) {
deleteImage( $item );
} else if ( $target.is( "a.ui-icon-zoomin" ) ) {
viewLargerImage( $target );
} else if ( $target.is( "a.ui-icon-refresh" ) ) {
recycleImage( $item );
}
return false;
});
});
</script>
<div class="ui-widget ui-helper-clearfix">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix" style="overflow-y:scroll; overflow-x:hidden; height:25px">
<li class="ui-widget-content ui-corner-tr" id="idid">
<h5 class="ui-widget-header">1mehfil</h5>
<img src="images/1mehfil.JPG" title="1mehfil" width="90" height="72" id="img_idid" />
<!--View larger-->
Click to Move in Vision Board
</li>
<li class="ui-widget-content ui-corner-tr" id="ididid">
<h5 class="ui-widget-header">1mehfil</h5>
<img src="images/8711215.jpg" title="8711215" width="90" height="72" id="img_ididid" />
<!--View larger-->
Click to Move in Vision Board
</li>
</ul>
</div>
<div> </div>
<div id="response_div_result" style="padding-left:10px">
<div id="trash" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Create your vision</span>Create your vision</h4>
</div>
</div>
This is code for the drag and drop in jquery I added in this some extra feature like it can be re-sized after dropped, but I also want it can be dragged in the dropped area, Can some one help me after dropped <li> can again draggable in the dropped area anywhere (inside the dropped area only). Hear i use to make draggable in dropped section $("li",$trash).draggable({ containment: 'parent' ,cursor: 'crosshair', revert:false}); by this code-currently its not working

Answer 1

I thought I'd knock up a quick prototype of what you're trying to do. See fiddle: http://jsfiddle.net/chrismoutray/VjXqg/
Now reviewing your example I think the problem lies in the use of fadeOut since this may create a race condition e.g. you're setting up the draggable trash elements at the same time the dropped element is being created.
In my example I've taken the following steps within the drop handler:
fade-out draggable element and then within the fade-out callback
manipulate draggable element (add/remove child elements/stylings)
append draggable element to trash ul list
setup element as draggable { containment: 'parent' }
finnally fade-in the draggable element
I guess the main point here is I'm doing everything inside the fade-out callback...