网页端做课程表拖拽，能够删改
网页端做课程表拖拽，能够删改
- vue端的想法
- 改用h5设计
- 实际效果
- 怎么做的
-
- 文件夹
- 具体代码
- 说明
- 在vue端显示
- 最后想说的
vue端的想法
我经手的项目本来是vue框架的，所以我想用vue做，经过了两天，果断放弃了。在这两天我用vuedraggable作为插件进行开发，这个插件的使用在网上可以找到很多。在这里我放出来它的中文文档地址vuedraggable文档地址，这个插件整体使用下来的感受就是如果我要在多个列表之间移动，这是很方便的插件。但我感觉仅限于列表，像课程表这样类似于二维数组的，网上虽然有实现的，但是仅实现了增，删和改都没有实现。而且最重要的，我发现双向绑定失效了。我做了一天多果断放弃。
改用h5设计
既然vue端不行了，那就再网上再找找吧。偶然间我发现，jquery有droppable这么一个ui，我就查了一下，感觉像是专门拖动的。我放出来效果看看吧。
实际效果
实际效果视频
怎么做的
文件夹
在public文件下，放入html文件，这可以让vue端管理这个文件，打包的时候也能一起打。
具体代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>drop</title>
<!--导入jquery插件-->
<script type="text/javascript" src="drop/jQuery1.11.3.min.js"></script>
<!--导入jqueryUI插件-->
<script type="text/javascript" src="drop/jquery-ui.js"></script>
<!--自写脚本-->
<script type="text/javascript" language="javascript">
//在页面加载完之后加载jquery
let dataList = [];
$().ready(function(e) {
//拖拽复制体
$('td[id^="draggable"]').draggable({
helper:"clone",
cursor: "move"
});
//释放后
$('td[id^="target"]').droppable({
drop:function(event,ui){
$(this).children().remove();
var source = ui.draggable.clone();
$('![]()
', {
src: '/drop/delete.png',
style:'display:none;width:20px;height:20px;',
click: function() {
let that =this;
console.log($(that).parent().parent().index());
dataList.forEach((item,index)=>{
if(item.time==$(that).parent().parent().index()&&item.times==$(that).parent().parent().attr('id')){
dataList.splice(index,1);
}
});
source.remove();
}
}).appendTo(source);
source.mouseenter(function () {
$(this).find("img").show();
});
source.mouseleave(function () {
$(this).find("img").hide();
});
$(this).append(source);
//x轴第几个times y轴第几个time
let datas={
//时间
time:$(source[0]).parent().index(),
//第几次
times:$(source[0]).parent().attr('id'),
//内容
date:$(source[0]).text()
};
let isRepeat = false;
dataList.forEach((item,index)=>{
if(datas.time==item.time&&datas.times==item.times){
//替换
dataList.splice(index,1);
dataList.push(datas);
isRepeat=true;
}
});
if(!isRepeat){
dataList.push(datas);
}
}
});
});
</script>
<style>
table
{
border-collapse:collapse;
}
table td
{
empty-cells : show
}
html,
body{
height: 100%;
width: 100%;
}
*{
margin: 0;
padding: 0;
}
.elbtn{
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #409EFF;
border: 1px solid #dcdfe6;
color: #fff;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
-webkit-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.morning{
position: absolute;
top:40px;
left: 120px;
height: 200px;
width: 30px;
background: #E7E7E7;
writing-mode:vertical-lr;
text-align: center;
padding-left: 10px;
border:1px #D0D0D0 solid;
}
.afternoon{
position: absolute;
top:240px;
left: 120px;
height: 200px;
width: 30px;
background: #E7E7E7;
writing-mode:vertical-lr;
text-align: center;
padding-left: 10px;
border:1px #D0D0D0 solid;
}
.week{
text-align: center;
border:1px #D0D0D0 solid;
background: #E7E7E7;
}
.ui-droppable{
border:1px #D0D0D0 solid;
}
</style>
</head>
<body>
<table>
<tbody><tr>
<td>
<table style="width: 100px;margin-right: 60px;">
<tbody><tr height="40">
<td id="draggable1" style="color: #fff;text-align: center;" width="110" bgcolor="peru" class="ui-draggable ui-draggable-handle">小同期</td>
</tr>
<tr height="40">
<td id="draggable2" style="color: #fff;text-align: center;" width="110" bgcolor="lightgreen" class="ui-draggable ui-draggable-handle">中同期</td>
</tr>
<tr height="40">
<td id="draggable3" style="color: #fff;text-align: center;" width="110" bgcolor="salmon" class="ui-draggable ui-draggable-handle">大同期</td>
</tr>
</tbody></table>
</td>
<td>
<table>
<tbody><tr height="40">
<td width="300" class="week">星期一</td>
<td width="300" class="week">星期二</td>
<td width="300" class="week">星期三</td>
<td width="300" class="week">星期四</td>
<td width="300" class="week">星期五</td>
<td width="300" class="week">星期六</td>
<td width="300" class="week">星期天</td>
</tr>
<tr height="40">
<td width="150" id="targetmo" class="ui-droppable"></td>
<td width="150" id="targettu" class="ui-droppable"></td>
<td width="150" id="targetwe" class="ui-droppable"></td>
<td width="150" id="targetth" class="ui-droppable"></td>
<td width="150" id="targetfr" class="ui-droppable"></td>
<td width="150" id="targetsa" class="ui-droppable"></td>
<td width="150" id="targetsu" class="ui-droppable"></td>
</tr>
<tr height="40">
<td width="150" id="targetmon" class="ui-droppable"></td>
<td width="150" id="targetmon" class="ui-droppable"></td>
<td width="150" id="targetmon" class="ui-droppable"></td>
<td width="150" id="targetmon" class="ui-droppable"></td>
<td width="150" id="targetmon" class="ui-droppable"></td>
<td width="150" id="targetmon" class="ui-droppable"></td>
<td width="150" id="targetmon" class="ui-droppable"></td>
</tr>
<tr height="40">
<td width="150" id="targettue" class="ui-droppable"></td>
<td width="150" id="targettue" class="ui-droppable"></td>
<td width="150" id="targettue" class="ui-droppable"></td>
<td width="150" id="targettue" class="ui-droppable"></td>
<td width="150" id="targettue" class="ui-droppable"></td>
<td width="150" id="targettue" class="ui-droppable"></td>
<td width="150" id="targettue" class="ui-droppable"></td>
</tr>
<tr height="40">
<td width="150" id="targetwen" class="ui-droppable"></td>
<td width="150" id="targetwen" class="ui-droppable"></td>
<td width="150" id="targetwen" class="ui-droppable"></td>
<td width="150" id="targetwen" class="ui-droppable"></td>
<td width="150" id="targetwen" class="ui-droppable"></td>
<td width="150" id="targetwen" class="ui-droppable"></td>
<td width="150" id="targetwen" class="ui-droppable"></td>
</tr>
<tr height="40">
<td width="150" id="targetthu" class="ui-droppable"></td>
<td width="150" id="targetthu" class="ui-droppable"></td>
<td width="150" id="targetthu" class="ui-droppable"></td>
<td width="150" id="targetthu" class="ui-droppable"></td>
<td width="150" id="targetthu" class="ui-droppable"></td>
<td width="150" id="targetthu" class="ui-droppable"></td>
<td width="150" id="targetthu" class="ui-droppable"></td>
</tr>
<tr height="40">
<td width="150" id="targetfri" class="ui-droppable"></td>
<td width="150" id="targetfri" class="ui-droppable"></td>
<td width="150" id="targetfri" class="ui-droppable"></td>
<td width="150" id="targetfri" class="ui-droppable"></td>
<td width="150" id="targetfri" class="ui-droppable"></td>
<td width="150" id="targetfri" class="ui-droppable"></td>
<td width="150" id="targetfri" class="ui-droppable"></td>
</tr>
<tr height="40">
<td width="150" id="targetsat" class="ui-droppable"></td>
<td width="150" id="targetsat" class="ui-droppable"></td>
<td width="150" id="targetsat" class="ui-droppable"></td>
<td width="150" id="targetsat" class="ui-droppable"></td>
<td width="150" id="targetsat" class="ui-droppable"></td>
<td width="150" id="targetsat" class="ui-droppable"></td>
<td width="150" id="targetsat" class="ui-droppable"></td>
</tr>
<tr height="40">
<td width="150" id="targetsun" class="ui-droppable"></td>
<td width="150" id="targetsun" class="ui-droppable"></td>
<td width="150" id="targetsun" class="ui-droppable"></td>
<td width="150" id="targetsun" class="ui-droppable"></td>
<td width="150" id="targetsun" class="ui-droppable"></td>
<td width="150" id="targetsun" class="ui-droppable"></td>
<td width="150" id="targetsun" class="ui-droppable"></td>
</tr>
<tr height="40">
<td width="150" id="targetsuna" class="ui-droppable"></td>
<td width="150" id="targetsuna" class="ui-droppable"></td>
<td width="150" id="targetsuna" class="ui-droppable"></td>
<td width="150" id="targetsuna" class="ui-droppable"></td>
<td width="150" id="targetsuna" class="ui-droppable"></td>
<td width="150" id="targetsuna" class="ui-droppable"></td>
<td width="150" id="targetsuna" class="ui-droppable"></td>
</tr>
<tr height="40">
<td width="150" id="targetsunb" class="ui-droppable"></td>
<td width="150" id="targetsunb" class="ui-droppable"></td>
<td width="150" id="targetsunb" class="ui-droppable"></td>
<td width="150" id="targetsunb" class="ui-droppable"></td>
<td width="150" id="targetsunb" class="ui-droppable"></td>
<td width="150" id="targetsunb" class="ui-droppable"></td>
<td width="150" id="targetsunb" class="ui-droppable"></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
<div class="morning">上午</div>
<div class="afternoon">下午</div>
<button class="elbtn" id="tijiao">提交</button>
</body>
</html>
说明
这里面的jq文件就麻烦自己下载一下啦
在vue端显示
我是在代码中直接嵌套一个iframe实现的
<iframe src="drop.html" scrolling="no" style="width: 900px;height: 500px;" frameborder="0" ></iframe>
如果你文件和我一样放在public的根目录，那恭喜你这段代码你可以直接拿过去了
最后想说的
这个东西看起来并不难啊，但是网上的确实很少，我也是找了很长时间才找到的，所以才想着写一篇这个文章，把漏洞填一填这类的，毕竟这类需求好像还挺常见的。就这样吧，希望大家天天开心