wijmo ListBox drag drop functionality

Posted by: pallavi.guda on 23 May 2021, 10:25 pm EST

  • Posted 23 May 2021, 10:25 pm EST

    Hi,

    am using the wijmo listbox drag and drop event but my requirement is highlighted cell should not perform drag and drop event while remaining values how can I do that please help me.

    this the method am using

    initListBox(ListData) {
    enableDragDropInList(ListData, ListData);
    ListData.hostElement.addEventListener("mousedown", function (e) {
    console.log(ListData.roworder);
    let target = wjCore.closest(e.target, ".wj-glyph");
    if (!target) {
    return;
    }
    let listItem = wjCore.closest(target, ".wj-listbox-item");
    if (listItem) {

    listItem.setAttribute("draggable", "true");
    }
    });
    }


  • Replied 25 May 2021, 12:24 am EST

    Hi,

    To achieve the required functionality, you may handle the dragstart event in capturing phase and stop the event propagation if the element contains wj-state-selected class. You may refer to the following code snippet and the sample demonstrating the same:
    list.hostElement.addEventListener(
    "dragstart",
    (e) => {
    const listItem = wjCore.closest(e.target, ".wj-listbox-item");
    if (listItem && wjCore.hasClass(listItem, "wj-state-selected")) {
    // prvent drag
    e.preventDefault();
    e.stopPropagation();
    }
    },
    true
    );

    https://codesandbox.io/s/wijmo-angular-forked-3fbp8?file=/src/app/app.component.ts

    Regards
  • Replied 25 May 2021, 7:36 pm EST

    Hi Wijmo,

    I have tried the above code it is stopping from dragging but I also want drop functionality for the highlighted cell.
    Even If I drag or drop highlighted cell it should not perform any event.

    Thanks & Regards,
    Pallavi Guda.
  • Replied 27 May 2021, 7:25 pm EST

    HI,

    can you please help me out

    regards,
    pallavi guda
  • Marked as Answer

    Replied 27 May 2021, 7:58 pm EST

    Hi Pallavi,

    If I understand correctly, you need to prevent dropping on the selected item too, for this you may handle the mousemove event stop the eventPropagation. Please refer to the following sample demonstrating the same:
    https://codesandbox.io/s/wijmo-angular-forked-0vx92?file=/src/app/app.component.ts
    If you had a different requirement, please provide more information about the same

    Regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels