VueJS 拖放 [需要一个简单的 CSS 修复]

Posted 2023-02-22

【中文标题】VueJS 拖放 [需要一个简单的 CSS 修复]

【英文标题】：VueJS drag and drop [Need a simple CSS fix]

【发布时间】：2019-07-05 05:10:03

【问题描述】：

我正在开发一个基于 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/

【问题讨论】：

我认为从拖动区域中删除位置：绝对。会解决问题

【参考方案1】：

你可以这样做。

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>