Форум

Александр Владимирович · #1 (**permalink**) 06.06.2010, 13:22

Есть механизм реализации перемещения объекта. Суть вопроса в том, что в елементе есть 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

добавлено
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>

Форум

Справочник

Discord чат

Курсы javascript