2016-02-20 34 views
0

我正在做一个游戏,涉及使用jQuery的点击和拖动。当您点击游戏div(红色)时,会出现一个黑色块,您可以拖动。我做了一个小提琴,在这里:jQuery与CSS转换mousemove

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'); 
} 
+0

为什么延误?试着去理解,这样我就可以看到是否有一种很好的替代方法。这绝对是你的过渡。 –

+0

如果你改变你的过渡到10ms它会更平滑 –

+0

@AlainNisam延迟是没有必要的,我只是好奇为什么会发生这种情况。对我来说,点击绿框后,即使1ms的过渡也会变得非常激动。 – McScott

回答

-1

解决方案:

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

无论出于何种原因,取消绿色框中的默认行为,停止任何跳动。

更新小提琴:

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

+0

'event.preventDefault()'与解决方案无关。在你的JS Fiddle中'mousemove'事件处理程序绑定到'document'而不是'#游戏',它解决了这个问题。考虑改变我接受的答案。 –

+0

无论“mousemove”绑定在何处,都会出现问题。我的解决方案适用于[示例小提琴](https:// jsfiddle。net/r9pet266/9 /)(将'mousemove'绑定到'#游戏')和我的游戏。 – McScott

+0

你连接的小提琴不起作用。 –

1

当您移动光标出局ide红色和黑色框,它在#game之外,所以mousemove事件处理程序不会触发。您应该分配mousemove事件处理程序document而不是#game,像这样:

$(document).mousemove(updatePosition); 

updated JS Fiddle

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

为什么块停止移动的原因是,你的鼠标悬停事件侦听器只正在运行,当你在移动的红色方块。

跳跃归功于event bubbling。黑盒子是红盒子的一个子元素,所以在黑盒子上方盘旋意味着你也在红盒子上盘旋。 (退房的链接,一个适当的解释。)