位置：首页>> 网络编程>> JavaScript>> js/jq仿window文件夹移动/剪切/复制等操作代码

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

作者：小结巴巴吧　　发布时间：2024-04-16 09:50:01　

标签：js,window

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

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 不同按键值完成不同的操作，如移动、剪切、复制、粘贴等。。

来源：http://www.cnblogs.com/jiebba/p/6518847.html

投稿

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

猜你喜欢