Moveable + Selecto: How to correctly setup dragTarget with Multiple Selected Elements? #953
Description
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