Перетаскивается в HTML пользовательских тегов - PullRequest
Новая
       5

Перетаскивается в HTML пользовательских тегов

0 голосов
/ 25 февраля 2020

Согласно моему требованию, мне нужно было создать пользовательские HTML теги. после этого мне нужно добавить градиентные возможности в эти пользовательские теги. Когда атрибут gradable=true добавляется в общие элементы html, он работает должным образом, но не в пользовательском теге. 

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

ondragstart функция не срабатывает при использовании кода выше.

1 Ответ

0 голосов
/ 25 февраля 2020

Вы можете сделать это так. Я использовал его с IONI C и Angular.

Но вы можете получить идею использовать функцию перетаскивания.

Вот мой код файла 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>
...