jQuery mousemove с переходами CSS

Question

Я делаю игру, которая включает в себя щелчок и перетаскивание с помощью jQuery. Когда вы нажимаете внутри игры div (красный), появляется черный блок, который можно перетаскивать. Я сделал скрипку здесь:

https://jsfiddle.net/r9pet266/6/

Я хотел небольшую задержку между движением мыши и движением блока, поэтому я добавил свойство перехода CSS на блоке.

Движение кажется гладким до тех пор, пока вы нажимаете и перетаскиваете внутри игрового div, но как только вы нажимаете вне игрового div, щелчок и перетаскивание внутри него становится очень нервным.

Кто-нибудь знает почему?

HTML

<div id="outer"> 
    <div id="game"></div> 
    <div id="instructions"> 
    1. Click and drag inside the red box --> smooth <br> 
    2. Click on the green <br> 
    3. Click and drag inside the red box --> jumpy 
    </div> 
</div> 

CSS

#outer { 
    height: 500px; 
    background: green; 
} 

#instructions { 
    position: absolute; 
    top: 350px; 
    left: 100px; 
} 

#game { 
    position: relative; 
    display: inline-block; 
    width: 300px; 
    height: 270px; 
    background: red; 
} 

.block { 
    transition: 100ms; 
    position: absolute; 
    width: 80px; 
    height: 80px; 
    background: black; 
} 

JavaScript:

var $block; 

$('#game').mousedown(function (e) { 
    e.preventDefault(); 

    $block = $('<div>'); 
    $block.addClass('block'); 
    updatePosition(e); 
    $('#game').append($block); 

    $('#game').mousemove(updatePosition); 

    $(window).one('mouseup', function() { 
    $block.remove(); 
    $('#game').off('mousemove'); 
    }); 
}); 

function updatePosition (e) { 
    $block.css('top', e.pageY - 45 + 'px'); 
    $block.css('left', e.pageX - 45 + 'px'); 
} 

Answer 1

Решения:

$('#outer').mousedown(function (e) { 
    e.preventDefault(); 
}); 

по какой-либо причине, отменив поведение по умолчанию на зеленом поле остановили любую нервозность.

Обновлено скрипку:

https://jsfiddle.net/r9pet266/7/

Answer 2

При перемещении курсора аутов ide красный и черный ящик, это вне #game, поэтому обработчик события mousemove не стреляет. Вы должны назначить обработчик события для mousemovedocument вместо #game, как это:

$(document).mousemove(updatePosition); 

См updated JS Fiddle.

Answer 3

// change 
$('#game').mousemove(updatePosition); 
// to 
$(window).mousemove(updatePosition); 

Причина, почему блок перестает двигаться в том, что ваш Mouseover слушатель события только выполняющиеся, когда вы движетесь по красной коробке.

Прыжки благодаря event bubbling. Черный ящик является дочерним элементом красного прямоугольника, поэтому, нависая над черным ящиком, вы также нависаете над красной рамкой. (Проверьте ссылку для правильного объяснения.)