Javascript 可拖动的HTML自定义标记

根据我的要求，我需要创建自定义HTML标记。之后，我需要将可分级功能添加到该自定义标记中。将

gradable=true

属性添加到常规html元素时，其工作方式与预期相同，但不在自定义标记中

"<fooRow id='toolSearchBox' title='Row' draggable='true' ondragstart='drag(event)'>"  + table + rowProperty + "</fooRow>";

“”+table+rowProperty+“”；

ondragstart

在使用上述代码时，函数未命中。

您可以这样做。 我用过离子型和角型

但是你可以想到使用拖放功能

这是我的TS文件代码

ngOnInit() {
    let arrayOfItems: any = [{
      itemArrayName: 'array1',
      items: [{
        itemname: 'item1',
        itemId: '01'
      }, {
        itemname: 'item2',
        itemId: '02'
      },
      {
        itemname: 'item5',
        itemId: '05'
      }],
    },
    {
      itemArrayName: 'array2',
      items: [{
        itemname: 'item3',
        itemId: '03'
      }, {
        itemname: 'item4',
        itemId: '04'
      },
      {
        itemname: 'item2',
        itemId: '02'
      }],
    },
    {
      itemArrayName: 'array3',
      items: [{
        itemname: 'item5',
        itemId: '05'
      },
      {
        itemname: 'item3',
        itemId: '03'
      }]
    }]
    this.itemsCollection = arrayOfItems;
  }

  drop(ev, cart) { // ev = event, cart = the cart where item droped, item the item which is selected for drag and drop.
    cart.items.forEach(cartItem => {
      if (cartItem.itemId === this.selectedItem.itemId) {
        this.process.presentToast('This item is already in this cart.');
        this.getLocalDragDrop();
        ev.preventDefault();
        //console.log("can't be drop");
      }
    });
    cart.items.push(this.selectedItem);
    let changedCarts = {
      "arrayOfItems": []
    };
    changedCarts.arrayOfItems.push(cart);
    changedCarts.arrayOfItems.push(this.droppableCart);
    localStorage.setItem('dragDropCart', JSON.stringify(changedCarts));
    this.getLocalDragDrop();
    ev.preventDefault();
  }
  allowDrop(ev) {
    ev.preventDefault();
  }
  drag(cart, item) {
    this.selectedItem = item;
    this.droppableCart = cart;
  }
  getLocalDragDrop() {
    let abc = localStorage.getItem('dragDropCart');
    if (abc) {
      this.dragDropCart = JSON.parse(abc);
    }
  }

现在，您可以像这样在HTML文件中呈现它

<ion-list>
    <div *ngFor="let itemData of itemsCollection; let i = index;" (drop)="drop($event, itemData)"
      (dragover)="allowDrop($event)">
      <ion-label><strong class="modifiedDateCalss">{{itemData.itemArrayName}}</strong>
      </ion-label>
      <div *ngFor="let item of itemData.items; let i = index;" draggable="true" (dragstart)="drag(itemData, item)">
        <ion-card class="mainCardCalss" (click)="selectItem(i, item)" [ngClass]="{'addOpacity': item.selected}">
          <!--<ion-card class="mainCardCalss" (click)="selectItem(i, item)">  -->
          <ion-card-header class="cardHeaderClass">
            <ion-card-title class="m5-left">
              <div class="ellipsis-text">{{item.itemname}}</div>
            </ion-card-title>
          </ion-card-header>
        </ion-card>
      </div>
    </div>
  </ion-list>

{{itemData.itemArrayName}}
{{item.itemname}