js和jq仿window文件夹移动、剪切、复制等操作实例讲解

来源：动视网责编：小采时间：2020-11-27 20:05:10

js和jq仿window文件夹移动、剪切、复制等操作实例讲解

js和jq仿window文件夹移动、剪切、复制等操作实例讲解:window对文件夹的操作主要包括移动/剪切/复制，本篇文章主要用jQuery来实现，下面一起来了解一下把。本文主要介绍了js/jq仿window文件夹移动/剪切/复制等操作代码，非常具有实用价值，需要的朋友可以参考下。希望能帮助到大家。1.先看下效果吧！2.在添加一

推荐度：

点击下载本文 文档为doc格式

导读js和jq仿window文件夹移动、剪切、复制等操作实例讲解:window对文件夹的操作主要包括移动/剪切/复制，本篇文章主要用jQuery来实现，下面一起来了解一下把。本文主要介绍了js/jq仿window文件夹移动/剪切/复制等操作代码，非常具有实用价值，需要的朋友可以参考下。希望能帮助到大家。1.先看下效果吧！2.在添加一

window对文件夹的操作主要包括移动/剪切/复制，本篇文章主要用jQuery来实现，下面一起来了解一下把。本文主要介绍了js/jq仿window文件夹移动/剪切/复制等操作代码，非常具有实用价值，需要的朋友可以参考下。希望能帮助到大家。

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">

 <p style="clear: both"></p>

 </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>

 <p style="clear: both"></p>

 </ul>

 

</body>

</html>

3.添加插件

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

添加 OptionFile 操作对象

4.绑定函数和操作

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

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