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

来源：互联网发布：sql注入攻击视频编辑：程序博客网时间：2024/05/21 15:50
<!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>
阅读全文
0 0