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

これは、ドロップ後にサイズを変更できるように、このいくつかの追加機能に追加したjqueryのドラッグアンドドロップのコードですが、ドロップされた領域にドラッグできるようにしたいです<li>。ドロップ領域内のどこでも (ドロップ領域内のみ)。$("li",$trash).draggable({ containment: 'parent' ,cursor: 'crosshair', revert:false});このコードによって、ドロップされたセクションでドラッグ可能にするために使用していると聞きました-現在は機能していません

4

1 に答える 1

0

私はあなたがやろうとしていることの簡単なプロトタイプをノックアップすると思いました。フィドルを参照してください：http：//jsfiddle.net/chrismoutray/VjXqg/

ここで例を確認します。問題はfadeOutの使用にあると思います。これは、競合状態を引き起こす可能性があるためです。たとえば、ドロップされた要素の作成と同時にドラッグ可能なゴミ箱要素を設定している場合です。

私の例では、ドロップハンドラー内で次の手順を実行しました。

  • フェードアウトドラッグ可能な要素、次にフェードアウトコールバック 内
    • ドラッグ可能な要素を操作する（子要素/スタイルを追加/削除）
    • ドラッグ可能な要素をゴミ箱ulリストに追加する
    • ドラッグ可能な要素として設定{ containment: 'parent' }
    • 最後にドラッグ可能な要素をフェードインします

ここでの主なポイントは、フェードアウトコールバック内ですべてを実行していることだと思います...

于 2012-11-12T15:34:54.160 に答える