Question

我使用drap＆amp; amp在画布上放置一个图像但问题是，在将图像放在画布上之后，图像会丢失它放置的原始位置。

有时它会从原始位置下降，有时会向右移动。这是代码：

 $("#draggable1").draggable({
    stop: function(event, ui)
    {
       var canv = document.getElementById("tools_sketch");
       var rect = canv.getBoundingClientRect();
       x = event.clientX - rect.left;
       y = event.clientY - rect.top;

       ans = confirm("Is it correct position?");
       if (ans)
       {

          dropimg_over_ground("img1", x, y);
          $('#draggable1').remove();

       }

    }

 });
 dropimg_over_ground = function(imgid, lefti, topi)
 {
    var c = document.getElementById("tools_sketch");
    var ctx = c.getContext("2d");
    var img = document.getElementById(imgid);
    ctx.drawImage(img, lefti, topi);
 }

我搜索了很多论坛并尝试了很多解决方案，但它没有用。

Answer 1

只需减去容器的偏移量：



$('#drag').draggable({
    stop: function(e, ui){
        console.log('drag');

        console.log($(this).offset().top - $('#canvas').offset().top)
        console.log($(this).offset().left - $('#canvas').offset().left)
    }
});

$("#canvas").droppable({
    accept: "#drag",
    drop: function (event, ui) {
    },
    out: function (event, ui) {
        console.log('dragged out');
    }
});

$('#drag').draggable({ stop: function(e, ui){ console.log('drag'); console.log($(this).offset().top - $('#canvas').offset().top) console.log($(this).offset().left - $('#canvas').offset().left) } }); $("#canvas").droppable({ accept: "#drag", drop: function (event, ui) { }, out: function (event, ui) { console.log('dragged out'); } });

工作示例， http://jsfiddle.net/kBM6u/6/

检查控制台的结果

问候

拖动;在画布上删除图像位置问题

1 个答案: