daybrush
Custom button for drag along with moveable controls
Environments
- Framework name: Angular
- Framework version: 8
- Moveable Component version: 0.21.5
- Testable Address(optional):
Description
I want to add a custom button for drag along with moveable controls, and want to reader that custom button at the top of DOM so that it will be visible outside the container. How can I do this? Here are the screenshots for better understanding
@iprasadg
I am curious about how you made a custom button. Is it included in ables?
@daybrush No, I have written a separate code for it. I am using moveable from its early launch (by the way, thanks for awesome library) at that time ables are not there, so I have written my own code to use custom handle/buttons for drag. But, recently I have updated moveable and came to know that now moveable supports custom buttons using ables, but I am struggling to use ables in angular. Can you please help me?
@daybrush Any idea how to implement this? make custom able to drag the component
@iprasadg @ryantando
The component of moveable has a z-index of 2000. Make the z-index equal to that button, or
I recommend making it custom able. https://daybrush.com/moveable/storybook/?path=/story/make-custom-able--dimensionviewable
@daybrush If the container has overflow then z-index wont work. So yes custom able is the solution but how to do it in angular? The example shown is in react
@iprasadg
Custom Able in Vanilla. https://codepen.io/daybrush/pen/JjXmbmb
It is a react code, but if that is converted, it becomes createElement. Use the second argument, createElement.
@daybrush thanks for the example, this cleared few things for me 👍🏼
I'm trying to accomplish something similar, using a custom button for drag. But I only want to drag when actually using that button, not when clicking on the target component. Is that possible?
@tvanrijn if u add custom button and then give it a class/id. then u can set this property on your moveable object:
dragTarget = document.querySelector('.custom-button');
@ctrl-alt-deleted i did custom with property ables then I set property dragTarget = SVGElement | HTMLElement but it's not working. If u have any resolve. pls help me.
@trananhanc99 it should be similar to this example:
const customAble = {
name: "custom",
props: {},
events: {},
render(moveable, React) {
const rect = moveable.getRect();
return React.createElement(
"button",
{
key: "able-key",
type: "button",
onClick: () => {
console.log('click handler');
},
},
'btn text'
);
},
};
let movableProp = {
....
ables: [customAble],
props: {
custom: true,
},
};
Thanks @ctrl-alt-deleted but i want move element with button move I have example on codesandbox: https://codesandbox.io/s/sad-johnson-hicfpd?file=/src/App.tsx I don't know why it's not working. if u have idea please help me. Thanks a lot
@trananhanc99 thanks for the example, from my understanding this should work..... although it been while when i did this, also I used vanilla JS.
@trananhanc99
moveable's new version is released. Try setting (refresh) dragTarget in useEffect.
const [dragTarget, setDragTarget] = React.useState<HTMLElement>();
React.useEffect(() => {
setDragTarget(document.querySelector<HTMLElement>(".moveable-drag-target")!);
}, []);
return <div className="container">
<Moveable
target={targetRef}
ables={[DimensionViewable]}
draggable={true}
resizable={true}
rotatable={true}
dragTarget={dragTarget}