| |
|
|
| | Задача в том, чтобы определить, в какую сторону двигается курсор и на сколько пикселей он сместился после нажатия на левую кнопку мыши.
Т.е. нужен точно такой же принцип, как плагшин jquery imgareaselect.
Сорсы смотрел - не понял. слишком все абстрактно написано... :)
Подскажите, пожалуйста, как определить (повторить) данный принцип, но только с изображением.
Вот что я имею. Но картинка двигается некорректно (причем пока делаю движение по Х - то Y даже не дошел).
$drag.mousedown(function(e){
$(document).unbind('mouseup');
$(document).mousemove(function(event){ // при перемещении мыши
var frame_position_left = $frame.offset().left,
frame_position_top = $frame.offset().top,
current_margin = parseInt($source.css('margin-left')),
// определяем в какую сторону движется мышь
tmpX = event.pageX - curX,
newMargin = current_margin + tmpX;
curX = tmpX;
if (curX < 50){
$source.css('margin-left', newMargin);
}
// пришлось поставить такой таймер, который бы сбрасывал curX до нуля, т.е. при перемещении курсора отступы прибавляются друг к другу. От этого получается что чем больше двигаешь, тем дальше картина улетает
var moveTimer = setTimeout(function(){
curX = 0;
}, 500);
}).mouseup(function(){ // когда мышь отпущена
$(document).unbind('mousemove');
curX = 0;
});
});
|
| |
| |
|
|
| |
|
|
| |
для: FiX
(12.02.2014 в 22:05)
| | | Таймер то зачем? Всевозможные значения (кроме направления входа в область):
$(function() {
$('#area').mousedown(function(e) {
var pos = $(this).offset(),
X = e.pageX - pos.left,
Y = e.pageY - pos.top,
cur = 'Vcurr: '+Y+'<br>Hcurr: '+X+'<br>';
$(this).html(cur);
$(this).mousemove(function(e) {
var V = Y - e.pageY,
H = X - e.pageX,
V = V > 0 ? 'up: '+e.pageY+'/'+V : 'down: '+e.pageY+'/'+V,
H = H < 0 ? 'right: '+e.pageX+'/'+H : 'left: '+e.pageX+'/'+H;
Y = e.pageY;
X = e.pageX;
$(this).html(cur+V+'<br>'+H+'<br>'+Math.atan(e.pageY/e.pageX)*(180/Math.PI));
}).mouseup(function(){
$(this).unbind('mousemove');
});
});
});
<div id="area" style="width:400px;height:400px;border:1px solid #000"></div>
|
| |
| |
|
|
| |
|
|
| |
для: confirm
(13.02.2014 в 01:20)
| | | Да, это-то понятно... Отмерить движение относительно элемента не сложно.
У меня задача в том, чтобы понять, на сколько пикселей сдвинулся курсор в ту или иную сторону, и на столько сдвигать картинку. Т.е. картинку сдвигать не относительно курсора, а относительно текущего местоположения.
Например, мы двинули картину, потянули ее за левый верхний угол. У картинки стал margin-left -100px. Теперь взяли за правый нижний угол (координаты мыши уже другие), и потянули влево - картинка должна плавно переместиться направо.
Т.е. в вашем случае картинка будет скакать туда-сюда, потому что она позиционируется относительно курсора. А мне нужно чтобы она была на месте и сдвигалась лишь тогда, когда курсор движется.
http://odyniec.net/projects/imgareaselect/ вот тут пример как хочу двигать картинку (там двигается выделение). | |
| |
|
|
| |
|
|
| |
для: Fix
(13.02.2014 в 10:02)
| | | Для того чтобы сдвигать картинку зачем считать пиксели? Нажали, захват, протащили, бросили, все. Если требуется проверка границ, то и проверяйте их достижение.
Посмотрите код работы Drag & Drop.
В моем случае получается положение курсора, направление и знак направления, о чем вы и спрашивали.
А по поводу ссылки смотрите плагины обрезки (cropping), не так там и сложно. | |
| |
|
|
