我正在尝试监控Javascript的dragStart和dragEvent事件,以确定它的方向,是向上还是向下。
然而,我无法获得事件传递的任何详细信息 -- 这有助于做出结论。
有没有更好的方法来检查拖动的方向,向上还是向下?
注意: 我的问题发生在WebOS的mojo Javascript中。
谢谢, -iwan
我正在尝试监控Javascript的dragStart和dragEvent事件,以确定它的方向,是向上还是向下。
然而,我无法获得事件传递的任何详细信息 -- 这有助于做出结论。
有没有更好的方法来检查拖动的方向,向上还是向下?
注意: 我的问题发生在WebOS的mojo Javascript中。
谢谢, -iwan
我之前不知道有 dragStart
和 dragEvent
,但是为什么不使用 onmousedown
、onmousemove
和 onmouseup
呢?
我制作了一个修改版的 http://dunnbypaul.net/js_mouse/。当你拖动图像时,方向会显示在 #status
中。已经在 IE5.5、IE6、IE7、IE8、Safari 5、Chrome 6 和 Navigator 9 中测试并且可用。适用于 Strict 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>
document.getElementById('status').innerHTML = 'Direction: ' + dir + '<br>Distance: ' + newy;
就解决了问题。不仅如此,它还不依赖于MooTools,就像下面的答案一样。 - Realto619你想使用dragOver。如果你只对垂直位置感兴趣,可以像这样做:
Javascript:
<script type="text/javascript">
function getPosY(event) {
console.log(event.clientY);
}
</script>
HTML:
<body ondragover="getPosY(event)">
编辑:这里是一个 jsfiddle。确保你的 js 控制台已经打开。
你可以让你的函数比较 clientY 值来确定鼠标移动的方向。