ng2-dragula執行拖放'n放置一邊排序和不同的模板

我設法讓拖放工作，只從一邊到另一邊，但排序被取消。我希望能夠在一側（目標側）而不是在另一側（源側）進行排序。ng2-dragula執行拖放'n放置一邊排序和不同的模板

此外，我希望在刪除時使用不同的模板替換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>

目標簡而言之：

僅從右側拖放到左側：完成，使用accept屬性完成。
僅允許在左側進行排序（目標側，id="elements-dropzone"）。不在右邊！
更改被拖動時被拖放的元素模板。

很想看到這方面的任何指針。非常感謝你。

來源

2017-05-29 Roberto

我也很喜歡，同時拖動來改變的元素。你找到解決方案嗎？ –

好吧，最後我寫了一個dropzonecomponent，它包含一個dynamiccomponents列表。一旦刪除，動態組件就會從被刪除的元素接收信息，並按照預期呈現組件（元素）。我比刪除被刪除的元素。不是最乾淨的解決方案，它確實按預期工作，甚至允許我進行更多定製。 – Roberto

您可以使用本機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">

來源

2017-05-29 09:31:22 Adnan

欣賞替代品。但是，如果可能的話，我確實希望使用Dragula，因爲這也可以處理其他事情。你有經驗嗎？ – Roberto

ng2-dragula執行拖放'n放置一邊排序和不同的模板

回答

相關問題