js/jq仿window文件夹移动/剪切/复制等操作-阿里云开发者社区

js/jq仿window文件夹移动/剪切/复制等操作

2017-03-08 1053

简介： 1.先看下效果吧！ 2.在添加一个index.html Title ul{list-style: none;min-height: 100px;min-width: 100px;background: #eee;} li{width:20...

+关注继续查看

1.先看下效果吧！

2.在添加一个index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery-1.12.4.min.js"></script>
</head>
<style>
    ul{list-style: none;min-height: 100px;min-width: 100px;background: #eee;}
    li{width:200px;margin:10px;float:left;height: 200px;background: #ccc;border: 1px solid #fff;overflow: hidden}
    .selected{border: 1px solid red}
</style>
<body>
    <ul class="test-box">
        <div style="clear: both"></div>
    </ul>
    <ul class='clearfix test' >
        <li><img src="./defaultlogo.jpg" alt=""></li>
        <li><img src="./defaultlogo.jpg" alt=""></li>
        <li><img src="./defaultlogo.jpg" alt=""></li>
        <li><img src="./defaultlogo.jpg" alt=""></li>
        <li><img src="./defaultlogo.jpg" alt=""></li>
        <li><img src="./defaultlogo.jpg" alt=""></li>
        <li><img src="./defaultlogo.jpg" alt=""></li>
        <li><img src="./defaultlogo.jpg" alt=""></li>
        <li><img src="./defaultlogo.jpg" alt=""></li>
        <li><img src="./defaultlogo.jpg" alt=""></li>
        <li><img src="./defaultlogo.jpg" alt=""></li>
        <li><img src="./defaultlogo.jpg" alt=""></li>
        <li><img src="./defaultlogo.jpg" alt=""></li>
        <div style="clear: both"></div>
    </ul>

</body>
</html>

3.添加插件

上一篇文章里面有 areaSelect.js 框选插件，用于我们框选我们要移动的内容，没有看的同志可以去上一篇复制过来。

添加 OptionFile 操作对象

 var OptionFile=(function (opt) {
            var o={
                width:100,    //
                height:100,
                gapWidth:2
            };
            var o = $.extend(o,opt),
                _body=$('body'),
                boxBg='<div style="position: absolute;height: 100%;width: 100%;background: rgba(225,225,225,1);left: 0;top: 0;z-index: 1"></div>',
                movingBox='<div class="moving-box" style="width: '+o.width+'px;height: '+o.height+'px;box-sizing:border-box;position: absolute;z-index: 8888;"></div>';
            return {
                actionLock:false, //移动锁定
                releaseTarget:false, //释放锁定
                keyCode:null,   //当前按键 键值
                //鼠标按下操作
                optionDown:function ( selectFile , type , evt ) {
                    this.releaseTarget=false;
                    this.getImgList(selectFile);
                    var currentX=evt.pageX;
                    var currentY=evt.pageY;
                    $('.moving-box').css({
                        top:currentY+10,
                        left:currentX+10
                    })
                },
                //鼠标移动操作
                optionMoving:function (selectFile , type , evt ) {
                    if(this.actionLock){
                        this.optionDown(selectFile , type , evt );
                    }
                },
                getImgList:function (selectFile) {
                    var length = selectFile .length,
                        imgWidth = o.width-10-(length)*o.gapWidth,
                        imgHeight = o.height-10-(length)*o.gapWidth;
                    if(!this.actionLock){
                        _body.append(movingBox);
                        $('.moving-box').append(boxBg);
                        $.each(selectFile,function (k, v) {
                            var img = '<img style="width:'+imgWidth+'px;height:'+imgHeight+'px;z-index:'+(k+2)+';position:absolute;right:'+(k+1)*o.gapWidth+'px;top:'+(k+1)*o.gapWidth+'px" src="'+v.src+'"/>';
                            $('.moving-box').append(img);
                        });
                    }
                    this.actionLock=true;
                },
                //放开鼠标操作(回调函数，返回按键键值和当前目标)
                closeOption:function (func) {
                    var _this= this;
                    $(document).keydown(function (event) {
                        _this.keyCode=event.keyCode;
                        $(document).on('mouseup',function (e) {
                            if(!_this.releaseTarget){
                                $('.moving-box').remove();
                                _this.actionLock=false;
                                $(document).unbind('mousemove');
                                _this.releaseTarget=true;
                                func(e,_this.keyCode);                  //返回当前 释放的  目标元素  ，  和按键code
                                $(document).unbind('keydown');
                                _this.keyCode=null;
                            }
                        })
                    });
                    $(document).trigger("keydown");
                    $(document).keyup(function (event){
                        $(document).unbind('keyup');
                        $(document).unbind('keydown');
                        _this.keyCode=null;
                    })
                }
            }
        })

4.绑定函数和操作

        $(function () {
            $(function () {
                $('.test').areaSelect()    //框选操作
            })
             var optionImg= new OptionFile();
             $('.test li').on("mousedown",function(e){
                 if($(this).hasClass('selected')) {
                     e.preventDefault();
                     e.stopPropagation();
                 }
                 var firstImg = $(this).find('img'),
                     currentList=$('.test li.selected img');  //框选的图片list，用于移动的时候显示
                 currentList.push({src:firstImg.attr('src')});  //移动时候的第一张图片
                 var loop = setTimeout(function () {
                     optionImg.optionDown(currentList,1,e );
                     $(document).mousemove(function (e) {
                         optionImg.optionMoving(currentList,1,e);
                         optionImg.closeOption(function (e,keycode) {
                             var target=$(e.target);    //目标位置  可以判断目标不同位置执行不同操作
                             console.log(keycode);      //拖拽放开时候是否有按键 keycode 按键的值    可以通过不同的 keycode 来执行不同操作
                             target.prepend($('.test li.selected'))
                         });
                     });
                 },200);
                 $(document).mouseup(function () {
                     clearTimeout(loop);
                 });
             });
        })

OK！现在可以看效果了，插件可以自己扩张和修改。

上面可以 keycode 不同按键值完成不同的操作，如移动、剪切、复制、粘贴等。。

个人博客：很多好用的 npm 包，可以看看 https://gilea.cn/　