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/

现在回顾您的示例，我认为问题在于使用淡出，因为这可能会产生竞争条件，例如您在创建拖放元素的同时设置可拖动垃圾元素。

在我的示例中，我在 drop 处理程序中采取了以下步骤：

  • 淡出可拖动元素，然后在淡出回调中
    • 操作可拖动元素（添加/删除子元素/样式）
    • 将可拖动元素附加到垃圾ul列表
    • 将元素设置为可拖动{ containment: 'parent' }
    • 最后淡入可拖动元素

我想这里的重点是我在淡出回调中做所有事情......

于 2012-11-12T15:34:54.160 回答