ng2-dragulaはソートと異なるテンプレートを使ってドラッグアンドドロップを実装します

Question

ドラッグアンドドロップを片側から他の側にドロップするだけで、ソートは取り消されます。私は片側（ターゲット側）と反対側（ソース側）ではなく、並べ替えることができるようにしたい。

また、HTMLElementを削除するときには別のテンプレートに置き換えてください。ドロップすると、さらにうまくいきます。

明確なユースケースが不足していることがドキュメントに記載されており、これがどのように実行できるのか、またどのようなものを使用するのが大好きです。

これは私のコードは、これまでのところです：短期で

import {Component} from "@angular/core"; 
import {DragulaService} from "ng2-dragula"; 
import {DragAndDropHelper} from "../../../helpers/DragAndDropHelper"; 

@Component({ 
    selector: 'app-segment-dropzone', 
    templateUrl: './segment-dropzone.component.html', 
    styleUrls: ['./segment-dropzone.component.scss'] 
}) 
export class SegmentDropzoneComponent { 
    constructor(private dragulaService: DragulaService) { 
     dragulaService.setOptions('elements-bag', { 
      copy: true, 
      copySortSource: true, 
      accepts: function (el, target, source, sibling) { 
       return target.id === 'elements-dropzone'; 
      }, 
     }); 
     dragulaService.drag.subscribe((value) => { 
      this.getElementView(DragAndDropHelper.getElementIdFromDraggedItem(value[1])); 
     }); 
    } 

    public getElementView(elementId: string) { 
     console.log(elementId); 
    } 
} 

target html

<div class="row"> 
    <div class="col-lg-12"> 
     <ul [dragula]='"elements-bag"' id="elements-dropzone"> 
      <li>first item</li> 
      <li>second item</li> 
     </ul> 
    </div> 
</div> 

source html

<div class="mt-list-container list-simple"> 
    <ul [dragula]='"elements-bag"' id="elements-list"> 
     <li class="mt-list-item" *ngFor="let element of elements" [attr.data-element-id]="element.id" > 
      <div class="list-icon-container done"> 
       <i class="icon-check"></i> 
      </div> 
      <div class="list-datetime">{{ element.type }}</div> 
      <div class="list-item-content"> 
       <h3 class="">{{ element.name }}</h3> 
      </div> 
     </li> 
    </ul> 
</div> 

目標：

1. 右から左にドラッグアンドドロップする：完了、 はacceptプロパティを使用して行われます。
2. 左側（ターゲット側、id="elements-dropzone"）のソートのみを許可します。右側にはない！
3. 要素テンプレートをドラッグしたまま、ドロップした後に変更します。

これについての参考になるでしょうか。どうもありがとうございました。

Answer 1

あなたはネイティブのHTMLのドラッグ＆ドロップを使用することができます：私はまた、ドラッグ中の要素を変更したい

<script> 
function allowDrop(ev) { 
    ev.preventDefault(); 
} 

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

function drop(ev) { 
ev.preventDefault(); 
var data = ev.dataTransfer.getData("text"); 
ev.target.appendChild(document.getElementById(data)); 
} 
</script> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">