Wijmo ListBox drag drop functionality

Wijmo ListBox drag drop functionality

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

• 

  pallavi.guda

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 May 2021, 10:25 pm EST - Updated 3 October 2022, 4:50 am 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");
          }
      });
  } 
  

  

  1366×768 38.4 KB

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  pallavi.guda

  • Post Options:
  • Link
    Copy

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

• 

  pallavi.guda

  • Post Options:
  • Link
    Copy

  Posted 27 May 2021, 7:25 pm EST

  HI,

  can you please help me out

  regards,
  
  pallavi guda

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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