Question

所以我有一个占用100％页面大小的画布，而这个画布的ontop是其他html元素。我想这样做，所以任何具有类game-gui的元素都可以在屏幕上拖动（这样用户就可以将它们放在他们想要的位置）。

这个js小提琴看起来像这样： http://jsfiddle.net/VYJCj/2/

这个代码可以在下面看到：

$('.game-gui').each(function(i, obj) {
    $(obj).on('dragstart', function(event){

        var left = parseInt($(obj).css("left"), 10);
        var top = parseInt($(obj).css("top"), 10);

        event.originalEvent.dataTransfer.effectAllowed = 'move';

        var str = (left - event.originalEvent.clientX) + ',' + (top - event.originalEvent.clientY)+ ',' + event.target.id;
        event.originalEvent.dataTransfer.setData("text/plain", str);
    });
});

this.canvas = $('#game_canvas');

this.canvas.bind('drop', function(event){
    event.stopPropagation();
    event.preventDefault();

    var offset = event.originalEvent.dataTransfer.getData("text/plain").split(',');

    console.log(offset);

    var obj = $('#' + offset[2]);
    var clientX = event.originalEvent.clientX || 0;
    var clientY = event.originalEvent.clientY || 0 ;


    obj.css('left', ( clientX+ parseInt(offset[0],10)) + 'px');
    obj.css('top', ( clientY + parseInt(offset[1],10)) + 'px');

    return false;
});

this.canvas.bind('dragover', function(event){
    event.preventDefault(); 
    event.originalEvent.dataTransfer.dropEffect = 'move';
    return false; 
});

正如您将能够从演示中看到的那样，您可以移动页面周围的元素，但是它们会移动到不同的位置然后它们应该！有人能帮我解决这个问题吗？

javascript拖放，拖动页面周围的元素是不准确的

0 个答案: