jquery ui实现拖拽文件到文件夹及拖出

最新推荐文章于 2023-03-15 10:00:46 发布

低_调_哥

最新推荐文章于 2023-03-15 10:00:46 发布

阅读量1.9k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/caiyongshengCSDN/article/details/78528258

版权

前端专栏收录该内容

76 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Droppable - Simple photo manager</title>
    <link rel="stylesheet" href="../../resources/plugins/jquery-ui/jquery-ui.min.css">
    <script src="../../resources/plugins/jquery/jquery-1.9.1.min.js"></script>
    <script src="../../resources/plugins/jquery/jquery-ui.min.js"></script>
    <style>
        .box-b { float: left; width: 59%; min-height: 12em; } * html .box-b { height: 12em; } /* IE6 */
        .gallery.custom-state-active { background: #eee; }
        .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center;background:red;list-style: none }
        .gallery li h5 { margin: 0 0 0.4em; cursor: move; }
        /*.gallery li a { float: right; }*/
        .gallery li .ui-icon-zoomin { float: left; }
        .gallery li .box-b {cursor: move;}

        .box-a { float: right; width: 32%; min-height: 18em; padding: 1%;} * html .box-a { height: 18em; } /* IE6 */
        .box-a h4 { line-height: 16px; margin: 0 0 0.4em; }
        .box-a h4 .ui-icon { float: left; }
        .box-a .gallery h5 { display: none; }
    </style>
    <script>
        $(function() {
            var $gallery = $( ".box-b" ),  //拖拽对象
                $trash = $( ".box-a" );    //接收容器

            $( "li", $gallery ).draggable({
                cancel: ".ui-icon", // 点击进行拖拽
                revert: "invalid", // 没有拖拽时元素回复原位
                containment: "document",
                helper: "clone",   
                cursor: "move"
            });

            // let the trash be droppable, accepting the gallery items
            $trash.droppable({
                accept: ".box-b > li",  //接收被拖拽过来的对象
                activeClass: "ui-state-highlight",
                drop: function( event, ui ) {
                    deleteImage( ui.draggable );
                }
            });


            $gallery.droppable({
                accept: ".box-a li",    //拖出的对象
                activeClass: "custom-state-active",
                drop: function( event, ui ) {
                    recycleImage( ui.draggable );
                }
            });

//            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() {
                    var $list = $( "ul", $trash ).length ? $( "ul", $trash ) : $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
//                    $item.find( ".ui-icon-trash" ).remove();  //清除删除按钮
//                    $item.append( recycle_icon )
                    $item.appendTo( $list ).fadeIn(function() {
//                        $item
//                            .animate({ width: "48px" })   //拖进后盒子变小
//                            .find( "box" )
//                            .animate({ height: "36px" });
                    });
                });
            }

//            var trash_icon = "<a href='#' title='Delete this image' class='ui-icon ui-icon-trash'>删除</a>";
            function recycleImage( $item ) {    //拖出
                $item.fadeOut(function() {
                    $item
                        .find( "a.ui-icon-refresh" )
                        .remove()
                        .end()
                        .css( "width", "96px")
//                        .append( trash_icon )   //移出时添加删除按钮
                        .find( "box" )
                        .css( "height", "72px" )
                        .end()
                        .appendTo( $gallery )
                        .fadeIn();
                });
            }
        });
    </script>
</head>
<body>

<div class="">
    <ul id="gallery" class="gallery box-b">
        <li>
            <h5 class="ui-widget-header">001</h5>
            <div style="width:96px;height:72px" class="box"></div>
        </li>
        <li>
            <h5 class="ui-widget-header">002</h5>
            <div style="width:96px;height:72px" class="box"></div>
        </li>
        <li>
            <h5 class="ui-widget-header">003</h5>
            <div style="width:96px;height:72px" class="box"></div>
        </li>
        <li>
            <h5 class="ui-widget-header">004</h5>
            <div style="width:96px;height:72px" class="box"></div>
        </li>
    </ul>

    <div id="trash" class="trash ui-widget-content box-a">
        <h4 class="ui-widget-header">接收盒子</h4>
    </div>

</div>

</body>
</html>