Moveable + Selecto: Dragging doesn't start sometime!

[jadiagaurang]

Environments

• Framework name: Vanilla JS
• Framework version: N/A
• Moveable Component version: 0.50.2
• Testable Address(optional): Have included video

Description

I am facing an issue where dragging doesn't start something on an Element on a Click Event. But able to select and resize the element. The mouse cursor has a "not-allowed" icon as well. I am using Selecto for selection, my config is as follows:

Object Initialization

var objSelecto = new Selecto({
    container: canvasContainer,
    dragContainer: canvasContainer,
    selectableTargets: [".el-wrapper"],
    hitRate: 100,
    selectByClick: true,
    preventClickEventOnDrag: false,  //  Prevent click event on drag. (mousemove, touchmove)
    selectFromInside: false,
    toggleContinueSelect: ["shift"],
    ratio: 0
});

Event Callbacks!

objSelecto
.on("dragStart", function (event) {
    var target = event.inputEvent.target;

    if (
        objMoveable.isMoveableElement(target)
        || targets.some(t => t === target
        || t.contains(target))
        || target.tagName === "BUTTON"
        || target.isContentEditable
    ) {
        event.stop();
    }
})
.on("select", function (event) {
    targets = event.selected;
    objMoveable.target = targets;

    console.log("Active Selected Elements", targets.length);
})
.on("selectEnd", function (event) {
    if (event.isDragStart) {
        event.inputEvent.preventDefault();

        setTimeout(() => {
            objMoveable.dragStart(event.inputEvent);
        });
    }
});

I won't be able to provide a testable link, so I have included a video for you to refer to.

Recording.2023-07-06.124527.mp4

I would appreciate any help!

[daybrush]

@jadiagaurang

1. May I know the code of moveable?
2. Is the preventDefault option set to false in the Moveable option?
3. Is draggable set to true in img?
4. Are you manually setting the cursor to not-allowed?

[jadiagaurang]

1. Here is my code for moveable!
2. I don't think I have upset preventDefault option!
3. I have so many Elements (Image, Video, Button, SVG, Headline, Paragraph, Icon, etc.) so, I have created a wrapper div with class (".el-wrapper") which I have setup with Selecto as selectableTargets: [".el-wrapper"]
4. I don't have any code to show not-allowed mouse cursor!

initMoveable: function () {
  var me = this;

  // Tooltip Label Element
  me.elTooltipLabel = me.$canvasContainer.find(".tooltip-label");

  // Width and Height of Container for Elements' Containment
  me.canvasContainerWidth = me.$canvasContainer.outerWidth(true);
  me.canvasContainerHeight = me.$canvasContainer.outerHeight(true);
  var defaultCellHeightWidth = me.getCellHeightWidth();

  me.objMoveable = new Moveable(me.canvasContainer, {
      target: [],

      hideChildMoveableDefaultLines: false,   // To visulize all Elements within a Group

      // Moveable will be updated when target's in inline style is detected!
      //useMutationObserver: true,
      //useResizeObserver: true,

      // To Move
      draggable: true,
      dragTarget: ".sc-" + me.options.SmartCanvasID + " .dragHandle",  // The target(s) to drag Moveable target(s). Currently setup with Custom Able DragHandleAble

      // To Rotate
      rotatable: true,

      // To Rezie
      resizable: true,
      scalable: true,

      // When resize or scale, keeps a ratio of the width, height
      keepRatio: false,

      // To Control CSS
      className: "sc-edit-controls",

      // Whether or not to show origin center in the controlbox
      origin: false,

      // May Be for Text: Add padding around the target to increase the drag area.
      padding: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
      },

      // ../moveable/issues/896
      // For <input type="text"></input>
      checkInput: false,
      // For contenteditable="true"
      dragFocusedInput: true,

      // Custom Abilities
      ables: [
          DragHandleAble
      ],
      props: {
          draghandleable: true
      },

      // To Snap
      snappable: true,
      // Limit movement within the container
      snapContainer: me.canvasContainer,
      bounds: {
          left: 0,
          top: 0,
          right: me.canvasContainerWidth,
          bottom: me.canvasContainerHeight
      },
      // Snap to a Grid
      snapDistFormat: (v, type) => `${v}px`,
      verticalGuidelines: [
          //me.canvasContainerWidth / 4,      // 25%
          //me.canvasContainerWidth / 2,        // 50%
          //me.canvasContainerWidth * 3 / 4   // 75%
      ],
      horizontalGuidelines: [
          //me.canvasContainerHeight / 4,     // 25%
          //me.canvasContainerHeight / 2,       // 50%
          //me.canvasContainerHeight * 3 / 4  // 75%
      ],
      snapDigit: defaultCellHeightWidth.cellWidth,
      snapThreshold: defaultCellHeightWidth.cellWidth,  // Distance value that can snap to guidelines
      snapGridWidth: defaultCellHeightWidth.cellWidth,  // Grid Cell Width
      snapGridHeight: defaultCellHeightWidth.cellHeight, // Grid Cell Height
      snapDirections: {
          left: true,
          top: true,
          right: true,
          bottom: true,
          center: true,
          middle: true
      },
      isDisplaySnapDigit: true,
      isDisplayInnerSnapDigit: true,
      isDisplayGridGuidelines: false,

      // Element Snap
      snapElement: false,
      snapGap: false,  // ../moveable/issues/943: snapGap is an option that can be used with elementGuidelines. snapGap works when the same distance between elements is reached.
      elementSnapDirections: false,
      elementGuidelines: me.$canvasContainer.find(".el-wrapper").get(),  //Add List of Element to enable Guidelines!

      // Rotation Snap
      rotationPosition: "bottom",
      snapRotataionThreshold: 5,
      snapRotationDegrees: [
          0,
          45,
          90,
          135,
          180,
          225,
          270,
          315
      ]
  });
}

[daybrush]

@jadiagaurang

Can you take a video while inspecting(dev tool) the elements of .dragHandle whenever you select like the video above?

[jadiagaurang]

Hi @daybrush Here is the requested video!

Recording.2023-07-06.190036.mp4

[daybrush]

@jadiagaurang

Oh right.

If dragTarget is set, the target cannot be dragged.
It seems to have worked by calling .dragStart via selecto.

Do you want to set dragTarget to target + dragHandle?

[jadiagaurang]

@daybrush That is correct. I would like to set dragTarget as Target Element itself as well as dragHandle, which I have added as CustomAble.

The main reason I requested to have dragHandle feature was to drag contentEditable Text Elements. Because we have RTE Editors on the Text Elements and those RTE Editors make it very difficult to drag Text Targets.

[daybrush]

@jadiagaurang

• croact-moveable 0.7.0
• @moveable/helper 0.1.3
• lit-moveable 0.28.0
• moveable 0.51.0
• preact-moveable 0.53.0
• react-moveable 0.54.0
• svelte-moveable 0.43.0
• vue-moveable 2.0.0-beta.82
• vue3-moveable 0.26.0
• ngx-moveable 0.48.0

moveable's new version is released.

Add dragTargetSelf prop is added.

Try set dragTargetSelf to true (default: false)

[jadiagaurang]

Hi @daybrush, I have updated my Project with the latest version of Moveable (0.51.0) and Selecto (1.26.0) and tried to implement
dragTargetSelf: true config.

For some reason, it is still not working as I expected. Here is the video after the updates.

Recording.2023-07-10.181157.mp4

[daybrush]

@jadiagaurang

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

[jadiagaurang]

Hi @daybrush, It is working well now. Thank you so much for your rapid responses. 🙏