Отловить направление onmousemove event?
Возможно ли отловить направление onmousemove event? Нужно для драг и дроп. Например, когда собираешься тянуть элемент вниз, код определят, что направление вниз и запрещает. Разрешается только вверх.
Полезное свойство. Думаю, не может быть, чтобы не было штатного. Но порылся в спецификациях, на qJ, на Мазиле, и нечего похожего не нашел. Может кто-то знает? Или нет штатного, писать свое надо? |
только отслеживанием координат мыши
|
как извращенный вариант: (однажды реализовывал... с координатами возиться лень было, а красота кода была не приоритетом) обернул нужный div четырьмя span'ами, каждый из который выступал из-за div'a только с одной стороны, и отлавливал мышь на них.. в зависимости от результата — то или иное действие)
|
Цитата:
|
Нет. родного нет, нужно писать свое.
|
так бы сделал Максим)
document.body.onmousemove = (function() {
var y = 0
return function(e) {
if (e.clientY > y) {
alert('вниз')
} else if (e.clientY < y) {
alert('вверх')
}
y = e.clientY
}
})()
|
Цитата:
|
Но ведь это непомерная нагрузка
|
Цитата:
|
лишние блоки сильнее нагружают комп чем то что сделал я. вот с чего.
|
Цитата:
|
с чего это он серьезный?? ты представляешь сколько браузер может обрабатывать и не захлебываться? 4 блока для него вообще не заметны. вернее для нас.
прочитай мой текст внимательно, твой способ это НЕПОМЕРНАЯ нагрузка, если существует мой. |
Как то так, но в идеале события лучше вешать через нормальные методы, addEvenetListener. Но для примера привожу примерно так.
Возможно что-то придется под себя подкорректировать.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background-color: #0f0;
color: #f00;
}
</style>
<script type="text/javascript">
function init() {
function mouseDirection( callback ) {
// Save old mouse position
var X, Y;
document.onmousemove = function( e ) {
// correction event for IE
e = e || window.event;
// correction page for IE
if ( e.pageX == null && e.clientX != null ) {
var html = document.documentElement,
body = document.body;
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
}
// reset direction to default
var direction = 0;
// adjust coordinates or move starting position
X = ( X || ( X = e.pageX ) ) && X <= e.pageX + 2 && X >= e.pageX - 2 && ( e.pageY >= Y + 2 || e.pageY <= Y - 2 ) ? e.pageX : X;
Y = ( Y || ( Y = e.pageY ) ) && Y <= e.pageY + 2 && Y >= e.pageY - 2 && ( e.pageX >= X + 2 || e.pageX <= X - 2 ) ? e.pageY : Y;
// definition position
direction += Y > e.pageY ? 1 : 0; // to TOP
direction += X < e.pageX ? 2 : 0; // to RIGHT
direction += Y < ( Y = e.pageY ) ? 4 : 0; // to BOTTOM
direction += X > ( X = e.pageX ) ? 8 : 0; // to LEFT
// execute callback
callback( direction );
}
}
(function( window ) {
var direction = 0;
mouseDirection(function( dir ) {
direction = dir;
});
document.getElementById('debug').onmouseout = function() {
var pos = '';
pos += direction & 1 ? 'Top' : '';
pos += direction & 2 ? 'Right' : '';
pos += direction & 4 ? 'Bottom' : '';
pos += direction & 8 ? 'Left' : '';
document.getElementById('debug').innerHTML = pos;
}
})( window );
}
</script>
</head>
<body onload="init();">
<div id="debug"></div>
</body>
</html>
|
devote,
и что вообще делает твой код, почему определение направления происходит только при выведении мышки за пределы квадрата? |
Цитата:
|
вот тебе другое:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function init() {
function mouseDirection( callback ) {
// Save old mouse position
var X, Y;
document.onmousemove = function( e ) {
// correction event for IE
e = e || window.event;
// correction page for IE
if ( e.pageX == null && e.clientX != null ) {
var html = document.documentElement,
body = document.body;
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
}
// reset direction to default
var direction = 0;
// adjust coordinates or move starting position
X = ( X || ( X = e.pageX ) ) && X <= e.pageX + 2 && X >= e.pageX - 2 && ( e.pageY >= Y + 2 || e.pageY <= Y - 2 ) ? e.pageX : X;
Y = ( Y || ( Y = e.pageY ) ) && Y <= e.pageY + 2 && Y >= e.pageY - 2 && ( e.pageX >= X + 2 || e.pageX <= X - 2 ) ? e.pageY : Y;
// definition position
direction += Y > e.pageY ? 1 : 0; // to TOP
direction += X < e.pageX ? 2 : 0; // to RIGHT
direction += Y < ( Y = e.pageY ) ? 4 : 0; // to BOTTOM
direction += X > ( X = e.pageX ) ? 8 : 0; // to LEFT
// execute callback
callback( direction );
}
}
mouseDirection(function( direction ) {
var pos = '';
pos += direction & 1 ? 'Top' : '';
pos += direction & 2 ? 'Right' : '';
pos += direction & 4 ? 'Bottom' : '';
pos += direction & 8 ? 'Left' : '';
document.getElementById('debug').innerHTML = pos;
});
}
</script>
</head>
<body onload="init();">
<div id="debug"></div>
</body>
</html>
|
потому что автору так надо было[источник?]
|
Цитата:
|
Я не знаю как вы вообще столько кода выдаете
<body>
<script>
document.body.onmousemove = (function() {
var y = 0
var x = 0
return function(e) {
if (e.clientY > y) {
console.log('вниз')
} else if (e.clientY < y) {
console.log('вверх')
}
if (e.clientX > x) {
console.log('вправо')
} else if (e.clientX < x) {
console.log('влево')
}
x = e.clientX; y = e.clientY
}
})()
</script>
</body>
|
Цитата:
|
Ну эт потому что боди пустое, а что за браузер?
|
| Часовой пояс GMT +3, время: 14:53. |