Поместите элементы между списком с помощью перетаскивания - PullRequest
Новая
       24

Поместите элементы между списком с помощью перетаскивания

0 голосов
/ 31 августа 2018

Я делаю функцию перетаскивания, используя чисто угловой и машинописный текст без какой-либо библиотеки.

HTML: 

<div class="listArea">
    <h4> Drag and Drop list in Green Area: </h4>
    <ul class="unstyle">
        <li id="1" draggable="true" (dragstart)="drag($event)">
            i am list 1
        </li>
        <li id="2" draggable="true" (dragstart)="drag($event)">
            i am list 2
        </li>
        <li id="3" draggable="true" (dragstart)="drag($event)">
            i am list 3
        </li>
        <li id="4" draggable="true" (dragstart)="drag($event)">
            i am list 4
        </li>
    </ul>
</div>
<div class="buildArea" id="div1" (drop)="drop($event)" (dragover)="allowDrop($event)">
    <h4> Drop Here </h4>
</div>

TS: 

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  allowDrop(ev) {
    ev.preventDefault();
  }

  drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }

  drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data).cloneNode(true));
  }
}

Работает Stackblitz: https://stackblitz.com/edit/angular-wyimor

В приведенном выше примере я могу перетаскивать элементы списка из одного элемента в другой.

Здесь я использовал, 

ev.target.appendChild(document.getElementById(data).cloneNode(true));

Так что его добавление к последнему из ранее отброшенных. Но мне нужно отбросить элементы списка там, где нужно пользователю.

Например, если пользователь перетаскивает список в порядке, 

I am list 1
I am list 2
I am list 4
I am list 5

Где пользователь теперь перетаскивает список I am list 3 и должен находиться между I am list 2 и I am list 4.

Пропущенный элемент должен быть отдельным списком без добавления в li.

Пожалуйста, помогите добиться перетаскивания элементов перетаскиваемого списка между элементами пропущенного списка, куда пользователь захочет.

...