Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make object rotate with drag, how to get a rotate point around the origin use sin or cos?
    primarykey
    data
    text
    <p>I've been searching long time, but can't find a better way solve my problem,<br> make div draggable, rotate and resize by each handle like these 2 example <a href="http://vremenno.net/examples/jquery-ui-rotation/" rel="nofollow noreferrer">1</a> <a href="http://fabricjs.com/kitchensink/" rel="nofollow noreferrer">2</a>,, now it can be draggable, but rotate..</p> <p>Regarding <a href="https://stackoverflow.com/a/10330295/1775888">Prasanth K C</a>, <a href="https://stackoverflow.com/a/11067482/1775888">Chango</a>, <a href="https://stackoverflow.com/a/3438798/1775888">Yi Jiang</a> ..'s answer, these code maybe not correct,<br> <strong>1. it should have a rotate point around the origin.<br> 2. need to consider radius.</strong><br> But I don't know how to use sin or cos here to make rotate consider radius?<br> Any suggestion will be be appreciated. <a href="http://jsfiddle.net/tBgLh/8/" rel="nofollow noreferrer">http://jsfiddle.net/tBgLh/8/</a></p> <pre><code>var dragging = false, target_wp; $('.handle').mousedown(function(e) { var o_x = e.pageX, o_y = e.pageY; // origin point e.preventDefault(); e.stopPropagation(); dragging = true; target_wp=$(e.target).closest('.draggable_wp'); $(document).mousemove(function(e) { if (dragging) { var s_x = e.pageX, s_y = e.pageY; // start rotate point if(s_x !== o_x &amp;&amp; s_y !== o_y){ //start rotate var s_rad = Math.atan2(s_y, s_x); var degree = (s_rad * (360 / (2 * Math.PI))); target_wp.css('-moz-transform', 'rotate(' + degree + 'deg)'); target_wp.css('-moz-transform-origin', '50% 50%'); target_wp.css('-webkit-transform', 'rotate(' + degree + 'deg)'); target_wp.css('-webkit-transform-origin', '50% 50%'); target_wp.css('-o-transform', 'rotate(' + degree + 'deg)'); target_wp.css('-o-transform-origin', '50% 50%'); target_wp.css('-ms-transform', 'rotate(' + degree + 'deg)'); target_wp.css('-ms-transform-origin', '50% 50%'); } } }) $(document).mouseup(function() { dragging = false }) })// end mousemove </code></pre> <p>html</p> <pre><code>&lt;div class="draggable_wp"&gt; &lt;div class="el"&gt;&lt;/div&gt; &lt;div class="handle"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload