Question

我想知道如何在刷新页面后保留垃圾项目（我在ddbb上保存了记录）

HTML：

<html>
<body>
    <ul id="gallery" class="gallery" style="list-style:none;">
        <li class="ui-widget-content ui-corner-tr" id="licar1">
            <img src="img/tipos/7Plazas.png" alt="7 Plazas" width="136" height="56" id="car1" />
            <h5 class="ui-widget-header">High Tatras</h5>
        </li>
        <li class="ui-widget-content ui-corner-tr" id="licar2">
            <img src="img/tipos/Deportivo.png" alt="The chalet at the Green mountain lake" id="car2" width="136" height="56" />
            <h5 class="ui-widget-header">High Tatras 2</h5>
        </li>
        <li class="ui-widget-content ui-corner-tr" id="licar3">
            <img src="img/tipos/Descapotable.png" alt="Planning the ascent" id="car3" width="136" height="56" />
            <h5 class="ui-widget-header">High Tatras 3</h5>
        </li>
    </ul>
    <div style="clear:both;"></div>
    <div id="trash" class="ui-widget-content ui-state-default">
    </div>
</body>

SCRIPT：

<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"
    });

    // let the trash be droppable, accepting the gallery items
    $trash.droppable({
        accept: "#gallery > li",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) {
            deleteImage( ui.draggable );
        }
    });

    // let the gallery be droppable as well, accepting items from the trash
    $gallery.droppable({
        accept: "#trash li",
        activeClass: "custom-state-active",
        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='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
    function deleteImage( $item ) {
        $item.fadeOut(function() {
            if($( "li", $trash ).length < 5){
                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.appendTo( $list ).fadeIn(function() {
                    $item
                        .animate({ width: "136px" })
                        .find( "img" )
                            .animate({ height: "56px" });
                });
            }
            else{
                //alert("No puede escoger mas de 5 tipos de vehiculo");
                recycleImage( $item );
            }
        });
    }

    // 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", "136px")
                //.append( trash_icon )
                .find( "img" )
                    .css( "height", "56px" )
                .end()
                .appendTo( $gallery )
                .fadeIn();
        });
    }

    // 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;
    });
});

我在HTML上添加了我的源代码，你可以看到容器（#gallery和#trash），在脚本上你可以看到jquery ui的例子，但有一些小改动

Answer 1

嗯，我解决了我的问题，实际上这很容易，问题是#thash容器没有像draggable一样，所以当我把它放在默认设置上时，它们无法拖动到＃画廊。所以我粘贴了决议：

<script>
$( "li", $trash ).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"
            });
</script>

JQuery UI Photo Manager示例代码

1 个答案: