cssの位置が絶対で親のdivがcssの位置関係にあるときに、イメージをドラッグ可能にする方法は？

Question

これはコードの私の一部です：使用

<div id="canvasImg" class="img-content position-relative"> 
    <loading></loading> 
    <canvas id="Canvas" class="position-absolute"></canvas> 
</div> 

CSS：

.position-relative{ 
    position: relative; 
} 
.position-absolute{ 
    position: absolute; 
} 

キャンバス画像を生成した後、私は動的にいくつかの画像を作成しています。

var createCanvasImgDiv = function (markerDetails) { 
      var result = "<img src='../../../../../sharedAssets/images/device_marker.png'" 
        + "class='position-absolute marker-Img'" 
        + "id='" + markerDetails.deviceId + "'" 
        + "name='" + markerDetails.externalName + "'" 
        + "radius='" + markerDetails.radius + "'" 
        + "emailTags='" + markerDetails.emails.join(",") + "'" 
        + "/>"; 
      return result; 
     }; 
_.map(deviceMarkers, function (tempMarker) { 
       var imagDiv = createCanvasImgDiv(tempMarker); 
       $("#canvasImg").append(angular.element(imagDiv)); 
       $compile(angular.element(imagDiv))($scope); 
      }); 

は、今私は<img>オブジェクトがマウスのドラッグで、親のdiv（ID = canvasImg）内の任意の場所を移動したいです。また、私はマウスの位置が欲しいときにそれをドロップします。

私にこれを手伝ってください。前もって感謝します。

Answer 1

私はこれを達成するためにjquery-ui draggable widgetを使用しました。

$("#image").draggable({ 
 
    containment: "parent" 
 
}); 
 
$("#image").on("dragstop", function(event, ui) { 
 
    alert("mouse position: X:" + event.pageX + ", Y:" + event.pageY); 
 
});

.position-relative { 
 
    position: relative; 
 
} 
 
.position-absolute { 
 
    position: absolute; 
 
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<div id="canvasImg" class="img-content position-relative" style="width:300px;height:200px;border:1px solid #000000;"> 
 
    <loading></loading> 
 
    <canvas id="Canvas" class="position-absolute" style="width:200px;height:100px;border:1px solid #000000;"></canvas> 
 
    <img id="image" class="position-relative" src="http://wallpaper.sc/en/ipad/wp-content/uploads/2014/10/ipad-2048x2048-thumbnail_00721-256x256.jpg" style="width:25px;height:25px;" /> 
 
</div>