Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.09.2012, 19:38
act act вне форума
Интересующийся
Отправить личное сообщение для act Посмотреть профиль Найти все сообщения от act
 
Регистрация: 25.09.2012
Сообщений: 11

Передвижение объекта
Всем доброго времени, уважаемые знатоки!
Пожалуйста помогите разобраться.

Никак не могу понять как такое сделать:

есть
<div class="field" style="width:500px;height:500px;position:relative;">
	<img src="img.png" at="img">
</div>


Как сделать, чтобы передвигать можно было только внутри этого контейнера field?

Чтобы не выходило за пределы.

var img=$('.field img');
img.mousedown(function() {
	$('.field').mousemove(function(e) {
		img.css({
			'position':'absolute',
			'top':e.pageY-15,
			'left':e.pageX-15
		});
	});
});


Никак не получается, пожалуйста помогите это сделать.
Что я упускаю?(
Исправьте пожалуйста...

Уже какой день не могу никак решить эту задачу.
Ответить с цитированием
  #2 (permalink)  
Старый 25.09.2012, 20:44
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,935

Не вижу сложности.
...
if( 
  e.pageY > minY && 
  e.pageY < maxY && 
  e.pageX > minX && 
  e.pageX < maxX
){
        img.css({
            'position':'absolute',
            'top':e.pageY-15,
            'left':e.pageX-15
        });
}
...

mix и max значения берутся естесно от размеров нужного блока кратинки.
__________________
29375, 35

Последний раз редактировалось Aetae, 25.09.2012 в 20:46.
Ответить с цитированием
  #3 (permalink)  
Старый 26.09.2012, 06:50
act act вне форума
Интересующийся
Отправить личное сообщение для act Посмотреть профиль Найти все сообщения от act
 
Регистрация: 25.09.2012
Сообщений: 11

Не работает он не верно перемещается и показывает координаты.
Нужно, чтобы только внутри квадрата, а он получается, что при клике улетает за него.

И вообще координаты не верные почему - то.

Помогите исправить, пожалуйста.

Сделал с offsetX и offsetY теперь вообще она не сдвигается.
И дребежит(
Ответить с цитированием
  #4 (permalink)  
Старый 26.09.2012, 09:15
Профессор
Отправить личное сообщение для Dmitriyff Посмотреть профиль Найти все сообщения от Dmitriyff
 
Регистрация: 22.07.2012
Сообщений: 164

раз уж вы используете jQuery

воспользуетесь и jQurey ui

пример из "Ограничения перемещений", это конечно не хардкор, но быстрое решение вашей проблемы
Ответить с цитированием
  #5 (permalink)  
Старый 26.09.2012, 13:09
act act вне форума
Интересующийся
Отправить личное сообщение для act Посмотреть профиль Найти все сообщения от act
 
Регистрация: 25.09.2012
Сообщений: 11

Dmitriyff, это не решит задачу.

Вообщем написал так:

$(document).ready(function() {
	$('.field img').each(function() {
		drag(this);
	});
});


var startX,
	startY,
	offsetX,
	offsetY,
	zindex,
	element;


function intval(intval) {
	intval=parseInt(intval);
	return intval==null || isNaN(n)?0:intval;
}


function drag(obj) {
        obj=$(obj);
	var field=$('.field'),
		target;
	obj.mousedown(function(e) {
		field.unbind('mouseup');
		target=e.target != null?e.target:e.srcElement;
		startX=e.clientX;
		startY=e.clientY;
		offsetX=intval(target.style.left);
		offsetY=intval(target.style.top);
		zindex=target.style.zIndex;
		target.style.zIndex=1000;
		element=target;
		field.mousemove(function(e) {
			element.style.left=(offsetX+e.clientX-startX)+'px';
			element.style.top=(offsetY+e.clientY-startY)+'px';
			obj.mouseup(function() {
				field.unbind('mousemove');
			});
		});
	}
}


Теперь он двигается нормально.
Но возникла проблема, при отдалении или сколле, элемент уходит от мышки( как это решить? Прошу помогите...

Исправьте пожалуйста, что не так.

Последний раз редактировалось act, 26.09.2012 в 13:25.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт вычисления координат объекта banderasantonio197555 Events/DOM/Window 4 16.08.2011 16:37
прямая от первого объекта до второго ntro123 Events/DOM/Window 5 09.05.2011 07:41
импорт объекта в текущий скоп LedVisel Общие вопросы Javascript 4 05.06.2010 23:31
Как по событию вызвать метод определенного экземпляра объекта jvs jQuery 3 24.12.2009 15:04
Можно ли получить имя экземпляра объекта внутри самого объекта? Ichigeki Общие вопросы Javascript 9 14.11.2008 18:00