的JavaScript如何檢查拖動方向

我想監控的dragstart和JavaScript的的dragEvent，以結束其方向，向上或向下。的JavaScript如何檢查拖動方向

但是我不能讓在該事件傳遞的參數的任何細節 - 這有助於結束。

有沒有什麼更好的辦法來檢查拖動方向，向上或向下？

注：我的問題是在魔力具體發生的JavaScript在webOS的

感謝， -iwan

來源

2011-06-03 iwan

什麼上下移動意味着什麼？ UP意味着元素的y位置值是否小於dragStart事件的值？或者是否意味着元素的y位置值比之前的dragEvent小？ – 2011-06-03 08:33:43

嗯，我認爲你們都提到過（如果有作品）...將確定我是否向上滾動或向下滾動... – iwan 2011-06-05 00:14:41

它不會告訴你方向，但你可以得到元素的位置，你」重新拖拽並找出它的走向。

這可能會有所幫助：http://dunnbypaul.net/js_mouse/。

來源

2011-06-03 08:21:48 Edgar

您想使用dragOver。如果你只在垂直位置感興趣，你可以做這樣的事情：

的Javascript：

<script type="text/javascript"> 
    function getPosY(event) { 
     console.log(event.clientY); 
    } 
</script>

HTML：

<body ondragover="getPosY(event)">

編輯：Here's a jsfiddle。確保您的js控制檯處於打開狀態。

你可以有你的功能比較clientY值來確定鼠標移動的方向。

來源

2011-06-03 08:34:02 squidbe

我不知道dragStart和dragEvent，但爲什麼不使用onmousedown，onmousemove和onmouseup？

我做的http://dunnbypaul.net/js_mouse/修改後的版本。拖動圖像時，方向顯示在#status中。經過測試，適用於IE5.5，IE6，IE7，IE8，Safari 5，Chrome 6和Navigator 9.可以使用嚴格的Doctype（可能還有其他Doctype也沒有測試過）。

的JavaScript：

var dragobj = null; 
function getCurY(e) { 
    if (!e) e = window.event; 
    if (e.pageX || e.pageY) 
     return e.pageY; 
    else if (e.clientX || e.clientY) 
     return e.clientY + document.body.scrollTop; 
} 
function drag(context, e) { 
    dragobj = context; 
    document.onmousedown = function() { return false }; 
    document.onmouseup = function() { 
     if (dragobj) dragobj = null; 
     document.getElementById('status').innerHTML = 'Direction: n/a'; 
    } 
    var graby = getCurY(e); 
    var oriy = dragobj.offsetTop; 
    document.onmousemove = function(e) { 
     if (dragobj) { 
      dragobj.style.position = 'absolute'; 
      var newy = oriy + getCurY(e) - graby; 
      var dir = newy > parseInt(dragobj.style.top, 10) ? 'down' : 'up'; 
      dragobj.style.top = newy + 'px'; 
      document.getElementById('status').innerHTML = 'Direction: ' + dir; 
     } 
     return false; 
    } 
}

HTML：

<p onmousedown="drag(this, event)"> 
    <img src="http://1.bp.blogspot.com/-u3FKHnFg8cA/Td56DmfliyI/AAAAAAAAAJ8/fTCFNCTs7iE/s1600/trollface%255B1%255D.jpg" alt="Trollface" /> 
</p> 
<p id="status" style="position:absolute; top:0">Direction: n/a</p>

來源

2011-06-03 12:20:24 Midas

的JavaScript如何檢查拖動方向

回答

相關問題