elementGuideLines don't work when I use moveable.trigger('drag', {})

[william-spec]

Environments

• Framework name: React
• Framework version: v16
• Moveable Component version: 0.45.0

Description

I want to develop a feature like this: when I drag a element from outside into the area, I want to see snap and elementGuideLines so that I can know where to drop, but now I use moveable.trigger('drag') to drag, there's no snap and elementGuidelines

here's the Example: https://user-images.githubusercontent.com/52228900/236989068-fb28debc-d29c-4276-84b4-1ad592a99c92.mov

here's my core code

//I already set moveable.elementGuidelines = [ document.querySelector('#protoWiz-yyy')] and 
//moveable
 //     ?.on('drag', ({ target, left, top }) => {
  //      console.log('drag', target, left, top);
//
 //       target.style.left = `${left}px`;
 //       target.style.top = `${top}px`;
 //       moveable.updateRect();
  //    })

<div
        id="protoWiz-container"
        style={{ position: 'relative', width: 500, height: 1000, border: '1px solid black' }}
        onDragEnter={e => {
          moveable?.trigger('dragStart', {});
        }}
        onDragOver={e => {
          const c = document.querySelector('#protoWiz-container')?.getBoundingClientRect();
          moveable?.trigger('drag', {
            target: document.querySelector('#protoWiz-xxx'),
            left: c ? e.pageX - c.left : e.pageX,
            top: c ? e.pageY - c.top : e.pageY
          });
        }}
      >
<div
          id="protoWiz-xxx"
          style={{
            width: 50,
            height: 50,
            border: '1px solid red',
            borderRadius: 4,
            position: 'absolute',
            right: 0
          }}
        />
        <div
          id="protoWiz-yyy"
          style={{
            width: 100,
            height: 100,
            border: '1px solid blue',
            borderRadius: 4,
            position: 'absolute'
          }}
        />
      </div>
</div>

[daybrush]

@william-spec

trigger is a method used internally.

There is a way to use request.

https://daybrush.com/moveable/release/latest/doc/Moveable.Draggable.html#request

But request doesn't support snap&bounds yet.

But if it's like your video, I think you can try .dragStart.

moveable. dragStart(e. inputEvent);

https://daybrush.com/moveable/release/latest/doc/Moveable.html#dragStart

https://daybrush.com/moveable/storybook/?path=/story/combination-with-other-components--components-selecto

[william-spec]

@daybrush the problem is I need to use moveable. dragStart(e. inputEvent) in a dragEnter Event, but it seems the param e which is dragEvent type does not work in moveable.dragStart

<div
        id="protoWiz-container"
        style={{ position: 'relative', width: 500, height: 1000, border: '1px solid black' }}
        onDragEnter={e => {
          moveable.dragStart(e)
        }}
      />

[daybrush]

@william-spec

react-moveable 0.50.6

moveable's new version is released. try it again.