I'm looking for an approach to drag an image that is clipped within a rectangle that is smaller than the image size. Essentially achieve what is shown in this example https://codepen.io/jonathan/pen/abNGbE.
I investigated using the Draggable utility in Kendo React, trying out the StackBlitz example, but can't quite get it right. I tried setting the HTMLDivElement as the React.useRef
const myimage = React.useRef<HTMLDivElement | null>(null);and then returning a div component instead of the Button in the example.
return (
<div style={{overflow:'hidden',height:'100px',width:'100px'}} ref={myimage}>
<div style={{position:'relative'}}>
<img
src="https://lh4.googleusercontent.com/-8tqTFxi2ebU/Ufo4j_thf7I/AAAAAAAADFM/_ZBQctm9e8E/w270-h203-no/flower.jpg"
style={{position:'absolute',top:0,left:0,border:0}}
/>
</div>
</div>
);How can I achieve this effect using a Kendo component?
1 Answer, 1 is accepted
Hi Gregg,
I have tested the Draggable component with the provided code and I was able to observe an issue with the "img" tag. Replacing the img with simple DIV with background-image worked correctly:
For some reason the Draggable breaks with img tag and is able to move it only a small distance before the dragEnd fires. We will need more time to investigate this particular problem, but using a DIV with background-image should do the trick. Another option would be to use the native Drag & Drop API for achieving the desired result.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Thank you Konstantin, I appreciate the help and see this working in your example.
An additional problem I have run into getting this to work is that when I use this same code and the component is within a reactstrap Modal, the drag behavior does not work. The image has no drag behavior at all. Have you had experience getting this to work within a modal or have suggestions how I might get it to work?
Thanks,
Gregg
Hi Gregg,
I have tested the scenario with the KendoReact Dialog modal and everything is working correctly:
As for the third-party modal that you are using, it seems that the component is initialized with some delay and the useDraggable could not get reference to the image within the modal. One way for resolving this would be to use Draggable instead. I have modified the example so it can demonstrates how to use Draggable with the reactstrap modal:
https://stackblitz.com/edit/react-byuwc1-qwsyff?file=app%2Fmain.jsx
Hope this helps.
Rank 1
Exactly what I needed! I followed your second example and got it working in my code base. I really appreciate you taking the time to provide this examples.
Thank you!
-Gregg