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> |
добавлено
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>
|
| Часовой пояс GMT +3, время: 05:40. |