Перетаскивание из одного объекта в другой с помощью VueDraggable - PullRequest
Новая
       81

Перетаскивание из одного объекта в другой с помощью VueDraggable

1 голос
/ 25 февраля 2020

У меня есть код ниже, что я пытаюсь сделать, это переместить один элемент "li" из списка, который находится в объекте, в другой список, который находится в другом объекте. Оба объекта генерируются динамически с помощью v-for. Объекты отображаются из моей собственной базы данных. По сути, я хочу переместить один элемент "todo" "li" из одного списка в другой, как вы можете это сделать в Trello. 

    <ul class="row">
      <li v-for="project in projects" :key="project._id" class="project-pannel">
        <draggable v-model="project.todos" :key="project._id">
          {{ project.title }}
          <ul>
            <draggable v-model="todo">
              <li v-for="todo in project.todos" :key="todo._id">
                <button v-on:click="deleteTodo(todo._id, project._id)">
                  X
                </button>
                <button
                  v-on:click="
                    toggleEditModal('block');
                    updateTodoDelegate(project._id, todo._id, todo);
                  "
                >
                  Edit
                </button>
                <button
                  v-if="todo.state == 'complete'"
                  v-on:click="changeState(project._id, todo._id, todo.state)"
                >
                  Activate
                </button>
                <button
                  v-if="todo.state == 'active'"
                  v-on:click="changeState(project._id, todo._id, todo.state)"
                >
                  Complete
                </button>
                <h4
                  :style="
                    todo.state === 'complete'
                      ? 'text-decoration: line-through;'
                      : 'text-decoration: none;'
                  "
                  class="mt-1 lead text-break"
                >
                  {{ todo.title }}
                </h4>
                <p
                  :style="
                    todo.state === 'complete'
                      ? 'text-decoration: line-through;'
                      : 'text-decoration: none;'
                  "
                  class="mt-1 lead text-break"
                >
                  {{ todo.description }}
                </p>
                <p>{{ todo.priority }}</p>
              </li>
            </draggable>
          </ul>
          <button
            v-on:click="
              projectKeyChanger(project._id);
              toggleAddModal('block');
            "
          >
            Add Todo
          </button>
          <button v-on:click="deleteProject(project._id)">Delete</button>
        </draggable>
      </li>
    </ul>

Это модель того, как выглядят мои объекты, я рендеринг объектов, рендеринг их заголовков, используя v-for, затем я использую другой v-for внутри исходного списка, чтобы отобразить каждый список «todos» объекта. 

{
_id: "5e46bf0393349c09c4d2d10f",
todos: [
 {
  _id: "5e46bf1f93349c09c4d2d110",
  title: "Add delete edit todos",
  description: "CRUD for todos",
  priority: 1,
  state: "complete"
 }
]
...