jQuery與CSS轉換mousemove

我正在做一個遊戲，涉及使用jQuery的點擊和拖動。當您點擊遊戲div（紅色）時，會出現一個黑色塊，您可以拖動。我做了一個小提琴，在這裏：jQuery與CSS轉換mousemove

我想要的鼠標移動和塊移動之間有輕微的延遲，所以我加了塊上的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'); 
}

來源

2016-02-20 McScott

爲什麼延誤？試着去理解，這樣我就可以看到是否有一種很好的替代方法。這絕對是你的過渡。 –

如果你改變你的過渡到10ms它會更平滑 –

@AlainNisam延遲是沒有必要的，我只是好奇爲什麼會發生這種情況。對我來說，點擊綠框後，即使1ms的過渡也會變得非常激動。 – McScott

-1

解決方案：

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

無論出於何種原因，取消綠色框中的默認行爲，停止任何跳動。

更新小提琴：

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

來源

2016-02-21 06:24:52 McScott

'event.preventDefault（）'與解決方案無關。在你的JS Fiddle中'mousemove'事件處理程序綁定到'document'而不是'＃遊戲'，它解決了這個問題。考慮改變我接受的答案。 –

無論「mousemove」綁定在何處，都會出現問題。我的解決方案適用於[示例小提琴]（https：// jsfiddle。net/r9pet266/9 /）（將'mousemove'綁定到'＃遊戲'）和我的遊戲。 – McScott

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

當您移動光標出局ide紅色和黑色框，它在#game之外，所以mousemove事件處理程序不會觸發。您應該分配mousemove事件處理程序document而不是#game，像這樣：

$(document).mousemove(updatePosition);

見updated JS Fiddle。

來源

2016-02-20 04:01:58

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

爲什麼塊停止移動的原因是，你的鼠標懸停事件偵聽器只正在運行，當你在移動的紅色方塊。

跳躍歸功於event bubbling。黑盒子是紅盒子的一個子元素，所以在黑盒子上方盤旋意味着你也在紅盒子上盤旋。（退房的鏈接，一個適當的解釋。）

來源

2016-02-20 04:34:35 Asagex

jQuery與CSS轉換mousemove

回答

相關問題