JavaScript, как проверить направление перетаскивания - PullRequest
Новая
       0

JavaScript, как проверить направление перетаскивания

4 голосов
/ 03 июня 2011

Я пытаюсь отслеживать dragStart и dragEvent javascript, чтобы определить его направление, ВВЕРХ или ВНИЗ.

Однако я не смог получить какие-либо подробности в аргументах, передаваемых событием - которые помогают заключить.

Есть ли лучший способ проверить направление перетаскивания, вверх или вниз?

Примечание: моя проблема, в частности, происходит в mojo javascript на webos

Спасибо, -iwan

Ответы [ 3 ]

0 голосов
/ 03 июня 2011

Вы хотите использовать dragOver.Вы можете сделать что-то подобное, если вас интересует только вертикальное положение:

Javascript: 

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

HTML: 

<body ondragover="getPosY(event)">

РЕДАКТИРОВАТЬ: * 1009jsfiddle .Убедитесь, что ваша консоль js открыта.

Ваша функция может сравнивать значения clientY, чтобы определить, в каком направлении движется мышь.

0 голосов
/ 03 июня 2011

Я не знал о dragStart и dragEvent, но почему бы не использовать onmousedown, onmousemove и onmouseup?

Я сделал измененную версию http://dunnbypaul.net/js_mouse/. Направление отображается в #status при перетаскивании изображения. Протестировано и работает в IE5.5, IE6, IE7, IE8, Safari 5, Chrome 6 и Navigator 9. Работает со строгим Doctype (возможно, также с другими Doctypes, не тестировал их).

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>
0 голосов
/ 03 июня 2011

Он не скажет вам направление, но вы можете узнать положение элемента, который вы перетаскиваете, и выяснить, в каком направлении он движется.

Это может быть полезно: http://dunnbypaul.net/js_mouse/.

...