javascript拖放，在页面周围拖动元素是不安全的

所以我有一个画布，它占据了100%的页面大小，这个画布的ontop是其他html元素。我想让任何有类游戏gui的元素都可以在屏幕上拖动，这样用户就可以把它们放在他们想要的地方

用于此的js小提琴如下所示：

代码如下所示：

$('.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; 
});

---

正如您可以从演示中看到的，您可以在页面上移动元素，但是它们会移动到不同的位置，然后它们应该移动！有人能在这件事上帮我吗？

你确定不是把元素放在光标所在的左上角吗？它不会自动调整你在可拖动屏幕中的点击位置。我100%确信，在更大的屏幕上看到它会变得更容易。聊天似乎进展顺利，但是你可以在朋友列表中看到这个问题。我发现的一个问题是，在dragstart中，有时你的“顶端”是NaN。确实解决了整个问题，但这只是一个开始。