drag and dropped with resizable in dropped area

0
votes
<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" />
        <!--<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>-->
        <a href="link/to/trash/script/when/we/have/js/off" title="Click to Move in Vision Board" class="ui-icon ui-icon-trash">Click to Move in Vision Board</a>
    </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" />
        <!--<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>-->
        <a href="link/to/trash/script/when/we/have/js/off" title="Click to Move in Vision Board" class="ui-icon ui-icon-trash">Click to Move in Vision Board</a>
    </li>
</ul>
</div>
<div>&nbsp;</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

1
drag-and-drop
What specifically is the problem? Are you saying containment isn't working for you? – Chris Moutray
aftre dropped in droped area i want it becomes draggable means it can be re-position any where in this area (dropped area) – Manoj Kumar
this is urgent can some one help me how to make it draggable in the trash area(code is given above) – Manoj Kumar
Personally I think if you break the problem down and give the specifics you'll get a response. All that extra styling/code that distracts from the problem isn't helpful. Perhaps provide a jsFiddle in addition? – Chris Moutray
Have you tried creating a simple version of this problem i.e. 2 container elements (div's) with say a child element (div) that you drag from the 1st container to the 2nd and then work on the problem of containing the child once its inside the 2nd container? – Chris Moutray

1 Answers

0
votes

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...