Sortablejs-How not to insert a dom element when the onMove function is called

64 Views Asked by At

I try to add draggable function to the tree item. When I try to drag item A to item B, and I don't let go of the mouse, I notice that the dom element of item A is inserted into itemB.I don't want the dom element to be inserted into another dom element when dragging, I just want an interface to be called when onEnd is made.

<eltree>
  <div class="custom-node"></div>
</el-tree>
    rowDrop(dom) {
      const _this = this;
      Sortable.create(tbody, {
        group: {
          name: "shared", // set both lists to same group
          pull: 'clone',
        },
        animation: 150,
        forceFallback: true,
        draggable: '.custom-node',
        onMove(evt, originalEvent) {
        },
        onEnd(evt, originalEvent) {
          console.log('111')
          // some function
        }
      }
    }

When I add a return false code block in onMove, the dom is not inserted. But I found the onEnd function is not triggered. I hope it works, I need the final to attribute to in the onEnd Function

so,my needs are: 1、Don't insert dom item to other item while dragging 2、onEnd function can works, or I can get the final to items

<eltree>
  <div class="custom-node"></div>
</el-tree>
    rowDrop(dom) {
      const _this = this;
      Sortable.create(tbody, {
        group: {
          name: "shared", // set both lists to same group
          pull: 'clone',
        },
        animation: 150,
        forceFallback: true,
        draggable: '.custom-node',
        onMove(evt, originalEvent) {
+          return false
        },
        onEnd(evt, originalEvent) {
          console.log('111')
        }
      }
    }

version: sortablejs ^1.15.0 vue ^2.7.10

0

There are 0 best solutions below