js/jq仿window文件夹移动/剪切/复制等操作代码
程序员文章站
2023-10-13 15:06:10
window对文件夹的操作主要包括移动/剪切/复制，本篇文章主要用jquery来实现，下面一起来了解一下把。
1.先看下效果吧！
2.在添加一个index.ht...
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 不同按键值 完成不同的操作，如 移动、剪切、复制、粘贴等。。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 使用make
下一篇： 究竟是什么技术对纳米芯片产生重大影响？