Javascript.RU

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

Drag & Drop и Textarea
Есть механизм реализации перемещения объекта. Суть вопроса в том, что в елементе есть textarea при перемещении фокуса в которую нужно чтобы событие onmousemove прекращало свое действие, т.е. останавливалось.

Может кто сталкивался с таким....

var getDrag = {
	_setElement : null,
	attach : function(setElement) {
		setElement.onmousedown = getDrag._dragElementStart;
		setElement.dragElementStart = new Function();
		setElement.dragElement = new Function();
		setElement.dragEnd = new Function();
		return setElement;
	},
	_dragElementStart : function(dragEvent) {
		var setElement = getDrag._setElement = this;
		var dragX = parseInt(setElement.style.left);
		var dragY = parseInt(setElement.style.top);

		if (isNaN(parseInt(setElement.style.top))) {
			setElement.style.top = '150px';
		}
		if (isNaN(parseInt(setElement.style.left))) {
			setElement.style.left = '379px';
		}

		dragEvent = dragEvent ? dragEvent : window.event;
		setElement.mouseX = dragEvent.clientX;
		setElement.mouseY = dragEvent.clientY;
		setElement.dragElementStart(setElement, dragX, dragY);
		document.onmousemove = getDrag._dragElement;
		document.onmouseup = getDrag._dragEnd;
		return false;
	},
	_dragElement : function(dragEvent) {
		var setElement = getDrag._setElement;
		var dragX = parseInt(setElement.style.left);
		var dragY = parseInt(setElement.style.top);
		dragEvent = dragEvent ? dragEvent : window.event;
		setElement.style.left = dragX + (dragEvent.clientX - setElement.mouseX) + 'px';
		setElement.style.top = dragY + (dragEvent.clientY - setElement.mouseY) + 'px';
		setElement.mouseX = dragEvent.clientX;
		setElement.mouseY = dragEvent.clientY;
		setElement.dragElement(setElement, dragX, dragY);
		return false;
	},
	_dragEnd : function() {
		var setElement = getDrag._setElement;
		var dragX = parseInt(setElement.style.left);
		var dragY = parseInt(setElement.style.top);
		setElement.dragEnd(setElement, dragX, dragY);
		document.onmousemove = null;
		document.onmouseup = null;
		getDrag._setElement = null;
	}
};

var dragable = getDrag.attach(document.getElementById('form'));

<div id="form">
	<textarea></textarea>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 14.06.2010, 10:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

добавлено
var trigger = dragEvent.srcElement || dragEvent.target;
if (trigger.tagName.toLowerCase() == "textarea") return;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Drag & Drop </title>

</head>

<body>
<div id="form" align="center" style=" background-color: #FF0000;position:absolute;left:50px;top:50px; height: 70px; width: 200px; padding: 10px  ;">

    <textarea>перемещать красное</textarea>

</div>
<script language="JavaScript" type="text/javascript">
var getDrag = {
	_setElement : null,
	attach : function(setElement) {
		setElement.onmousedown = getDrag._dragElementStart;
		setElement.dragElementStart = new Function();
		setElement.dragElement = new Function();
		setElement.dragEnd = new Function();
		return setElement;
	},
	_dragElementStart : function(dragEvent) {
		var setElement = getDrag._setElement = this;
		var dragX = parseInt(setElement.style.left);
		var dragY = parseInt(setElement.style.top);

		if (isNaN(parseInt(setElement.style.top))) {
			setElement.style.top = '150px';
		}
		if (isNaN(parseInt(setElement.style.left))) {
			setElement.style.left = '379px';
		}

		dragEvent = dragEvent ? dragEvent : window.event;
 *!*       var trigger = dragEvent.srcElement || dragEvent.target;*/!*
 *!*       if (trigger.tagName.toLowerCase() == "textarea") return;*/!* 
   
     setElement.mouseX = dragEvent.clientX;
		setElement.mouseY = dragEvent.clientY;
		setElement.dragElementStart(setElement, dragX, dragY);
		document.onmousemove = getDrag._dragElement;
		document.onmouseup = getDrag._dragEnd;
		return false;
	},
	_dragElement : function(dragEvent) {
		var setElement = getDrag._setElement;
		var dragX = parseInt(setElement.style.left);
		var dragY = parseInt(setElement.style.top);
		dragEvent = dragEvent ? dragEvent : window.event;
		setElement.style.left = dragX + (dragEvent.clientX - setElement.mouseX) + 'px';
		setElement.style.top = dragY + (dragEvent.clientY - setElement.mouseY) + 'px';
		setElement.mouseX = dragEvent.clientX;
		setElement.mouseY = dragEvent.clientY;
		setElement.dragElement(setElement, dragX, dragY);
		return false;
	},
	_dragEnd : function() {
		var setElement = getDrag._setElement;
		var dragX = parseInt(setElement.style.left);
		var dragY = parseInt(setElement.style.top);
		setElement.dragEnd(setElement, dragX, dragY);
		document.onmousemove = null;
		document.onmouseup = null;
		getDrag._setElement = null;
	}
};

var dragable = getDrag.attach(document.getElementById('form'));
</script>

</body>

</html>

Последний раз редактировалось рони, 14.06.2010 в 10:36.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Реализация функции Drag $ drop parikmaher534 Javascript под браузер 2 12.05.2010 15:35
textarea validation Петр Общие вопросы Javascript 3 08.12.2009 18:59
drag and drop kalisha Элементы интерфейса 2 15.09.2008 11:11
Drag & Drop вопрос f1n jQuery 3 29.06.2008 15:47
Drag & Drop в полном объеме dizews Events/DOM/Window 3 26.07.2007 12:43