在具有指定坐标的div内绘制一条线

Question

I have this fiddle: http://jsfiddle.net/u4CBW/

$("#ninjaimage1").draggable({
    containment: "#cirlce1",
    stop: function (event, ui) {
        $("#cirlce1").animate({
            top: $(this).offset().top - 60,
            left: $(this).offset().left - 60
        });
    }
}); 

whenever the image is been dragged I want to draw a line between the starting position and the ending position of that image how can I achieve that ?

Answer 1

I would suggest you can have one more image ie an image of small dot or have div with height and width of like a dot with your chosen background. When you start the drag, start appending the image (position:absolute) to DOM with the mouse positions ie get top and left from mouse positions.

There could be many more ways to accomplish this. But this suggestion comes to my mind and thought to share it.

I know this could be a bit of work.

Check the fiddle:-

http://jsfiddle.net/u4CBW/9/

drag: function(e, ui){
             var top = ui.offset.top;
             var left = ui.offset.left;
             var newDot = $("<div class='dot'></div>");

There are some css issues. But it is working as your were expecting.