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

前端之家收集整理的这篇文章主要介绍了js/jq仿window文件夹移动/剪切/复制等操作代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

window对文件夹的操作主要包括移动/剪切/复制,本篇文章主要用jQuery来实现,下面一起来了解一下把。

1.先看下效果吧!

2.在添加一个index.html

<html lang="en">

<Meta charset="UTF-8">

Title

<script src="./jquery-1.12.4.min.js">

<ul class="test-Box">

<div style="clear: both"&gt;</div>
    <li><img src="./default<a href="/tag/logo/" target="_blank" class="keywords">logo</a>.jpg" alt=""&gt;</li>
    
    <li><img src="./default<a href="/tag/logo/" target="_blank" class="keywords">logo</a>.jpg" alt=""&gt;</li>
    
    <li><img src="./default<a href="/tag/logo/" target="_blank" class="keywords">logo</a>.jpg" alt=""&gt;</li>
    
    <li><img src="./default<a href="/tag/logo/" target="_blank" class="keywords">logo</a>.jpg" alt=""&gt;</li>
    
    <li><img src="./default<a href="/tag/logo/" target="_blank" class="keywords">logo</a>.jpg" alt=""&gt;</li>
    
    <li><img src="./default<a href="/tag/logo/" target="_blank" class="keywords">logo</a>.jpg" alt=""&gt;</li>
    
    <li><img src="./default<a href="/tag/logo/" target="_blank" class="keywords">logo</a>.jpg" alt=""&gt;</li>
    
    <li><img src="./default<a href="/tag/logo/" target="_blank" class="keywords">logo</a>.jpg" alt=""&gt;</li>
    
    <li><img src="./default<a href="/tag/logo/" target="_blank" class="keywords">logo</a>.jpg" alt=""&gt;</li>
    
    <li><img src="./default<a href="/tag/logo/" target="_blank" class="keywords">logo</a>.jpg" alt=""&gt;</li>
    
    <li><img src="./default<a href="/tag/logo/" target="_blank" class="keywords">logo</a>.jpg" alt=""&gt;</li>
    
    <li><img src="./default<a href="/tag/logo/" target="_blank" class="keywords">logo</a>.jpg" alt=""&gt;</li>
    
    <li><img src="./default<a href="/tag/logo/" target="_blank" class="keywords">logo</a>.jpg" alt=""&gt;</li>
    
    <div style="clear: both"&gt;</div>

3.添加插件

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

添加 OptionFile 操作对象

var o={ width:100,// height:100,gapWidth:2 }; var o = $.extend(o,opt),_body=$('body'),<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Bg='<div style="position: absolute;height: 100%;width: 100%;background: rgba(225,225,1);left: 0;top: 0;z-index: 1"&gt;</div>',moving<a href="/tag/Box/" target="_blank" class="keywords">Box</a>='<div class="moving-<a href="/tag/Box/" target="_blank" class="keywords">Box</a>" style="width: '+o.width+'px;height: '+o.height+'px;<a href="/tag/Box/" target="_blank" class="keywords">Box</a>-sizing:border-<a href="/tag/Box/" target="_blank" class="keywords">Box</a>;position: absolute;z-index: 8888;"&gt;</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-<a href="/tag/Box/" target="_blank" class="keywords">Box</a>').css({ top:currentY+10,left:currentX+10 }) },//鼠标移动操作 optionMoving:function (selectFile,evt ) { if(this.actionLock){ this.optionDown(selectFile,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(moving<a href="/tag/Box/" target="_blank" class="keywords">Box</a>); $('.moving-<a href="/tag/Box/" target="_blank" class="keywords">Box</a>').append(<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Bg); $.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+'"/&gt;'; $('.moving-<a href="/tag/Box/" target="_blank" class="keywords">Box</a>').append(img); }); } this.actionLock=true; },//放开鼠标操作(回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>,返回按键键值和当前目标) clo<a href="/tag/SEO/" title="SEO">SEO</a>ption:function (func) { var _this= this; $(document).keydown(function (event) { _this.keyCode=event.keyCode; $(document).on('mouseup',function (e) { if(!_this.releaseTarget){ $('.moving-<a href="/tag/Box/" target="_blank" class="keywords">Box</a>').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 () {

$('.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'); //框选的<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>list,用于移动的时候<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>

 currentList.push({src:firstImg.attr('src')}); //移动时候的<a href="/tag/diyizhangtupian/" target="_blank" class="keywords">第一张图片</a>

 var loop = setTimeout(function () {

   optionImg.optionDown(currentList,1,e );

   $(document).mousemove(function (e) {

     optionImg.optionMoving(currentList,e);

     optionImg.clo<a href="/tag/SEO/" title="SEO">SEO</a>ption(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 不同按键值 完成不同的操作,如 移动、剪切、复制、粘贴等。。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章