Menu
I want to let visitors scale the image using click-and-drag:
<html>
<body>
<svg>
<image>
Is there a JavaScript library that will help me?
I notice Raphael has click and drag methods but I will still have to write a lot of JS to:
I could do all that but it sounds time-consuming. Is there an open-source script I should use? Other suggestions?
505
The image link is inserted in the HTML page using <img> src attribute. Whenever we are going to insert the image, we have to enable draggable=”true”. Also, enable ondragstart=”drag(event)” so that this image can be draggable along with setting the image width and height.
Introduction to JavaScript Drag and Drop API To drag an image, you simply hold the mouse button down and then move it. To drag the text, you need to highlight some text and drag it in the same way as you would drag an image.
interact. js is a JavaScript module for Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE8+).
I found this solution at this post: Draggables and Resizables in SVG.
In the answer, you can find a jsfiddle link: http://jsfiddle.net/tmkfs/. You can resize the box by clicking and dragging the corner of the box. Hope this code could help you.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
