jquery - VueJS 拖放 [需要一个简单的 CSS 修复]
问题描述
我正在开发一个基于 VueJS 的项目,需要一个拖放 + 可嵌套选项,如下所示。到目前为止取得了很多成就,但是,我无法弄清楚为什么递归函数不能很好地工作。
谁能帮我弄清楚?JSFiddle 也附在底部。
更新:我刚刚弄清楚,这只是一个CSS问题。那么任何可以帮助我的CSS专家吗?
var local = {
template: '#template-drag',
name: 'local-draggable',
props: ['tasks']
};
new Vue({
el: "#app",
components: {
"local-draggable" : local
},
data: {
"tasks": [
{
"name": "task 1",
"tasks": []
},
{
"name": "task 2",
"tasks": []
},{
"name": "task 3",
"tasks": []
},
{
"name": "task 4",
"tasks": []
},
{
"name": "task 5",
"tasks": []
},
{
"name": "task 6",
"tasks": [
{
"name": "task 6.1",
"tasks": []
}
]
}
]
},
});
.parent{
position: relative;
padding-left: 15px;
}
.dragArea {
border: 1px dashed;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.dragArea .dragArea > .parent {
position: relative;
padding-top: 23px;
padding-left: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/sortablejs@1.7.0"></script>
<script src="https://unpkg.com/vuedraggable@2.16.0/dist/vuedraggable.js"></script>
<script type="text/x-template" id="template-drag">
<draggable :element="'div'" :list="tasks" class="dragArea" :options="{group:{ name:'g1'}}" >
<template v-for="el in tasks" class="parent">
<div class="parent">
<p>{{el.name}} - {{el.tasks}}</p>
<local-draggable :tasks="el.tasks"/>
</div>
</template>
</draggable>
</script>
<div id="app">
<local-draggable :tasks="tasks"/>
</div>
在这种情况下,我附上了 JSFiddle:https ://jsfiddle.net/minuwan/nb15jd48/
解决方案
你可以这样做。
var local = {
template: '#template-drag',
name: 'local-draggable',
props: ['tasks']
};
new Vue({
el: "#app",
components: {
"local-draggable" : local
},
data: {
"tasks": [
{
"name": "task 1",
"tasks": []
},
{
"name": "task 2",
"tasks": []
},{
"name": "task 3",
"tasks": []
},
{
"name": "task 4",
"tasks": []
},
{
"name": "task 5",
"tasks": []
},
{
"name": "task 6",
"tasks": [
{
"name": "task 6.1",
"tasks": []
}
]
}
]
},
});
.parent{
position: relative;
padding-left: 15px;
}
.dragArea {
border: 1px dashed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.dragArea .dragArea > .parent {
position: relative;
padding-left: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/sortablejs@1.7.0"></script>
<script src="https://unpkg.com/vuedraggable@2.16.0/dist/vuedraggable.js"></script>
<script type="text/x-template" id="template-drag">
<draggable :element="'div'" :list="tasks" class="dragArea" :options="{group:{ name:'g1'}}" >
<template v-for="el in tasks" class="parent">
<div class="parent">
<p>{{el.name}} - {{el.tasks}}</p>
<local-draggable :tasks="el.tasks"/>
</div>
</template>
</draggable>
</script>
<div id="app">
<local-draggable :tasks="tasks"/>
</div>
推荐阅读
- c# - 使用反射创建类型的实例
- android - 使用从 SharePreferences 获取的数据填充列表
- android - 如何在 Android 中将按钮与背景图像对齐
- swagger - 如何将 swagger 1.1 规范转换为 swagger >= 1.2 规范
- kubernetes - k8s的`Job`与systemd的`units`之间的区别?
- amazon-web-services - 如何将 boto3 cloudwatch 用于 SageMaker 提交的训练作业?
- c# - Asp.Net Core HTTPContext 和 RewritePath
- asp.net-core - MVC Core DropDownList 选择的值被忽略
- sql - 创建索引会加速 SAS 中的查询吗
- r - 在 LaTeX 环境(pmatrix)中使用来自 R 降价代码块的向量?