当css作为绝对位置并且其父div将css作为相对位置时，如何使图像可拖动？

Question

This is my part of code:

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

CSS used:

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

After generating the canvas image, I'm creating the some image dynamically.

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);
            });

Now I want the <img> object to move anywhere inside the parent div(id=canvasImg) on drag of mouse. Also I want the mouse position when it drops.

Please help me on this. Thanks in advance.

Answer 1

I've used jquery-ui draggable widget to achieve this.

 $("#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>