Dragable in HTML Custom tags

Question

As per my requirement i needed to create custom HTML Tags. after that i need to add gradable capabilities into that Custom tags. when add gradable=true attribute into general html elements its working as expected, but not in the custom tag.

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

ondragstart function not hitting when using above code.

Answer 1

You can do like this. I have used it with IONIC and Angular.

But you can get idea to use the drag and drop function.

Here is my TS file code.

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);
    }
  }

Now you can render it in HTML file using like this.

<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>