Press "Enter" to skip to content

JavaScript Library To Drag And Rotate SVG With One Finger | rotodrag-js

rotodrag-js is a mobile-friendly JavaScript drag-and-rotate library that lets you translate and rotate SVG objects with mouse or touch events.

drag and rotate javascript, drag and drop touch screen javascript, jquery drag resize and rotate image, svg drag and rotate, resize js library, svg drag and drop

How to make use of it:

To get began, embody the rotodrag-js library on the HTML web page.

<script src="rotodrag.js"></script>

Add the CSS class ‘draggables’ to the SVG component.

<svg class="draggables"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 280 150"
     version="1.1"
     id="svg4601"
>

Add the CSS class ‘draggable’ to the SVG component group and place the SVG object utilizing the ‘transform’ attribute.

<g class="draggable" id="example" transform="translate(70,90)">

Customize the rotodrag-js library with ‘data-dragstyle’ and ‘data-slip-radius’ attributes as follows:

<g class="draggable" 
   id="example" 
   transform="translate(70,90)" 
   data-dragstyle="slippery" 
   data-slip-radius="20"
>

Rotate & Transform SVG Elements With One Finger, rotodrag-js Plugin/Github, javascript drag and drop connectors


See Demo And Download

Official Website(asgordon): Click Here

This superior jQuery/javascript plugin is developed by asgordon. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.