Moveable + Selecto: How to correctly setup dragTarget with Multiple Selected Elements?

[jadiagaurang]

Environments

• Framework name: Vanilla JS
• Framework version: N/A
• Moveable Component version: 0.48.0
• Testable Address(optional): https://codepen.io/jadiagaurang/pen/QWJyEaE

Description

I am trying to use dragTarget property to move Elements specially contentEditable Text Elements.

It works for single element initially. I am facing issue when I select multiple elements then it doesn't drag the group. If I select single element after multiple selection then it stops dragging single element.

I have added Custom Able as following and setup dragTarget after initializing Moveable Object as follows;

const DragHandleAble = {
  name: "draghandleable",
  props: {},
  events: {},
  render(moveable, Renderer) {
    const rect = moveable.getRect();

    return Renderer.createElement("button", {
      key: "draghandleable",
      class: "dragHandle",
      style: {
        position: "absolute",
        left: `${rect.width / 2}px`,
        top: `${rect.height + 20}px`,
        background: "#4af",
        borderRadius: "2px",
        padding: "2px 4px",
        color: "white",
        fontSize: "13px",
        whiteSpace: "nowrap",
        fontWeight: "bold",
        willChange: "transform",
        transform: "translate(-50%, 0px)",
      }
    }, `dragHandle`);
  },
}

This is how I am setting up the dragTarget after initializing Moveable Object.

window.objMoveable = new Moveable(designCanvas, {
});
// The target(s) to drag Moveable target(s)
window.objMoveable.dragTarget = $(".dragHandle")[0];     // HTMLElement as Ref

[daybrush]

@jadiagaurang

In the case of Group <=> Single, the element of dragTarget is also regenerated because able is regenerated.

I will support several types of dragTarget.

In the next version you can use:

moveable.dragTarget = ".dragHandle";

[jadiagaurang]

Hi @daybrush

That will be helpful to pass the CSS Selector instead of the HTML Element Ref.

I'm looking forward to having this new feature, many thanks for considering my request.

[daybrush]

@jadiagaurang

• croact-moveable 0.5.0
• @moveable/helper 0.1.3
• lit-moveable 0.26.0
• moveable 0.49.0
• preact-moveable 0.51.0
• react-moveable 0.52.0
• svelte-moveable 0.41.0
• vue-moveable 2.0.0-beta.77
• vue3-moveable 0.24.0
• ngx-moveable 0.46.0

moveable's new version is released.

various types are supported.

moveable.dragTarget = ".dragHandler";
moveable.dragTarget = dragHandlerRef;

[jadiagaurang]

@daybrush Thanks for the updates.

It works very well with Single Target as well as Multiple.

[jadiagaurang]

@daybrush Did you change something in 0.49.1 version for dragHandle? It has stopped working correctly for Group.

Testable Address(optional): https://codepen.io/jadiagaurang/pen/QWJyEaE

https://github.com/daybrush/moveable/assets/430637/fd764ec8-0456-41cd-8740-1496dc6dd306

[jadiagaurang]

@daybrush I have added a BUTTON as CustomAble, which asks as dragTarget for the Moveable.

Custom DragHandleAble!

const { html } = TaggedJSX;
const DragHandleAble = ({
    name: "draghandleable",
    props: {},
    events: {},
    render: function (moveable, Renderer) {
        const rect = moveable.getRect();
        const { pos2 } = moveable.state;

        const DragHandleViewer = moveable.useCSS("button", `{
            position: absolute;
            left: 0px;
            top: 0px;
            will-change: transform;
            transform-origin: 0px 0px;
        }
        .dragHandle {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
            background: #4af;
            border-radius: 4px;
            appearance: none;
            border: 0;
            color: white;
            font-weight: bold;
        }`);

        return html`<${DragHandleViewer} className="dragHandle" style=${{ transform: `translate(${pos2[0]}px, ${pos2[1]}px) rotate(${rect.rotation}deg) translate(10px)`, }}> </>`(Renderer.createElement);
    }
});

I tied to set up ".dragHandle" as CSSSelector and/or $(".dragHandle")[0] as a HTMLElement to the dragTarget config option.

1. CSSSelector Implementation

   var objMoveable = new Moveable(canvasContainer, {
   draggable: true,
   dragTarget: ".dragHandle",
   ables: [
       DragHandleAble
   ],
   props: {
       draghandleable: true
   }
   });

2. HTMLElement Implementation

   // The target(s) to drag Moveable target(s)
   objMoveable.dragTarget = $(".dragHandle")[0];

It works something and doesn't work other times. It is just Hit-or-Miss. It should work with a single target and multiple targets (grouping). It is one of the very important features in my project, and dragTarget helps users to drag contenteditable Texts!

Please spend some time debugging and help me figure out how to implement this feature correctly.

[daybrush]

@jadiagaurang

• croact-moveable 0.6.1
• @moveable/helper 0.1.3
• lit-moveable 0.27.1
• moveable 0.50.1
• preact-moveable 0.52.1
• react-moveable 0.53.1
• svelte-moveable 0.42.1
• vue-moveable 2.0.0-beta.80
• vue3-moveable 0.25.1
• ngx-moveable 0.47.1

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