JS CSS3ドラッグ回転

上の図の直接の影響：

 

次にコード：

次の2つの方法の合計：

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
  < メタ文字コード= "UTF-8" > 
  < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
  < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
  < タイトル>ドキュメント</ タイトル> 
  < スクリプトSRC = "https://cdn.bootcss.com/jquery/3.4.1/jquery.min 。
  < スタイル> 
    ■は{ 
      幅：200pxの。
      高さ：100pxに。
      背景：#CCCCCC ; 
      位置：絶対; 
      トップ：30％; 
      左：40％; 
      変換起源：50％50％0 ; 
    } 
  </ スタイル> 
</ ヘッド> 
< 身体> 
  < div要素のid = "箱" クラス= "ボックス" > </ divの> 

  < スクリプト> 

    // 第一种
    するvar isMove =  偽; 
    $（' #box ' ）.mousedown（関数（イベント）{ 
      CONST要素= event.target; 
      CONST RECT = element.getBoundingClientRect（）; 
      element.dataset.centerX = rect.left + rect.width /  2 ; 
      element.dataset .centerY = rect.top + rect.height /  2。
      element.dataset.angle = getDragAngle（イベント）。
      isMove =  真; 
    }）; 

    $（' #box ' ）.mousemove（関数（イベント）{
       場合（isMove）{
         VARの角度= getDragAngle（イベント）; 
        event.target.style.transform =  ' 回転（'  + 角度+  ' RAD）' ; 
      } 
    } ）; 

    $（' #box ' ）.mouseup（関数（イベント）{
      isMove =  偽; 
      event.target.dataset.angle = getDragAngle（イベント）。
    }）; 

    関数getDragAngle（イベント）{
       VARの要素= event.target。
      VAR startAngleの= parseFloatは（element.dataset.angle）||  0 ;
      VaRの中心= { 
        X：parseFloatは（element.dataset.centerX）||  0 、
        Y：parseFloatは（element.dataset.centerY）||  0 、
      }。
      VaRの角度= Math.atan2（center.y - event.clientY、center.x - event.clientX）;
       戻り角度- startAngleの; 
    } 
//      第
//      $（ドキュメント）.on（ 'mouseMoveイベント'、関数（E）{ 
//        VAR X = e.clientX; 
//        VARのY = e.clientY; 
//        VAR原産地= {X：950、Y：190} //手動で現在の中心点を指定するには、現在の要素+幅に応じて残すことができますXトップ+高さ/ 2は、yの値を与える/ 2 

//        //中心点に対する要素の現在のマウス座標を算出
//        X = X - origin.x; // xがy軸origin.xよりも大きいので右へ、直接ライン上の保存
@        Y = origin.y - Y、Y //もしあなたがしたいが、origin.yよりも小さい場合、x軸方向、そうオンにする必要があり

//         //計算し、その後でそれは
//        VARのELE =のdocument.getElementById（ 'ボックス'）
//        VAR DEG = Math.atan2（Y、X）/にMath.PI * 180。
//        ele.style.transform = '回転（' + -DEG + 'DEG）' 
// }）。

    </ スクリプト> 

</ ボディ> 
</ HTML >