放置目标在图像外时无效

Question

我正在创建一个用于拖放图像数量的游戏。当我将数字拖到其大小之外时，放置目标突然变为无效。因此，我不能将图像编号拖动到外部或超出其宽度/高度大小。这是我的问题的插图：

我希望这是可以理解的。这是我的JavaScript代码：

var dragAndDrop = (function () {
        var selectedX = '';
        var selectedY = '';
        var selectedNumber = '';

        // Drag start //
        function startMove (e) {
            console.log('start move')
            selectedNumber = e.target;
            console.log(e.layerX + ', ' + e.layerY);
            console.dir(e.target);
            selectedX = e.offsetX === undefined ? e.layerX : e.offsetX;
            selectedY = e.offsetY === undefined ? e.layerY : e.offsetY;
            selectedNumber.style.zIndex = 11;
        }

        document.querySelector('body')
            .addEventListener('dragstart', startMove, false);

        // Drag over//
        function dragOver (e) {
            e.preventDefault();
            console.log('e')
        }
        document.querySelector('body')
            .addEventListener('dragover', dragOver, false);

        // Drop //
        function dropItem (e) {
            console.log('drop item')
            e.preventDefault();
            // Position element to latest updated location
            selectedNumber.style.left = ( e.pageX - selectedX ) + 'px';
            selectedNumber.style.top = (e.pageY - selectedY) + 'px';
            console.log(e.pageX + ' - ' + selectedX);
        }

        document.querySelector('body')
            .addEventListener('drop', dropItem, false);
    })();

我很乐意回答。谢谢