---
title: "Flyttbar div med textarea..."
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/154833-flyttbar-div-med-textarea"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "learn"
published: "2006-12-13T11:28:12.000Z"
updated: "2006-12-14T15:34:06.000Z"
replies: 11
views: 667
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/154833-flyttbar-div-med-textarea"
---

# Flyttbar div med textarea...

## #1 — learn, 2006-12-13T11:28Z

Jag kör [detta javascript](http://www.dynamicdrive.com/dynamicindex11/domdrag/index.htm) för att kunna flytta på en div. Det funkar bra så till vida jag inte har någon textarea i diven. När jag försöker placera markören i textarean för att skriva så händer det inget, istället kan jag flytta diven genom att klicka och dra i textarean. 

Hur kan jag lösa detta?

Tack!   :)

Permalänk: https://www.webforum.nu/p/154833

## #2 — Peter S, 2006-12-13T11:38Z

Vilken webbläsare gäller det? Med IE7 och Op9 fungerar det.

Permalänk: https://www.webforum.nu/p/1909632

## #3 — learn, 2006-12-13T11:43Z

Aha, har inte testat i dem. Jag kör FF 2.0

Permalänk: https://www.webforum.nu/p/1909633

## #4 — voigtann1, 2006-12-13T11:44Z

har du något exempel med textarea? som jag har testat på den sidan du länkade fungera allt kalas..

Permalänk: https://www.webforum.nu/p/1909634

## #5 — learn, 2006-12-13T12:02Z

Här är ett exempel...

```

<script type="text/javascript">

var Drag = {
	
	obj : null,

	init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
	{
		o.onmousedown	= Drag.start;

		o.hmode			= bSwapHorzRef ? false : true ;
		o.vmode			= bSwapVertRef ? false : true ;

		o.root = oRoot && oRoot != null ? oRoot : o ;

		if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
		if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
		if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
		if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

		o.minX	= typeof minX != 'undefined' ? minX : null;
		o.minY	= typeof minY != 'undefined' ? minY : null;
		o.maxX	= typeof maxX != 'undefined' ? maxX : null;
		o.maxY	= typeof maxY != 'undefined' ? maxY : null;

		o.xMapper = fXMapper ? fXMapper : null;
		o.yMapper = fYMapper ? fYMapper : null;

		o.root.onDragStart	= new Function();
		o.root.onDragEnd	= new Function();
		o.root.onDrag		= new Function();
	},

	start : function(e)
	{
		var o = Drag.obj = this;
		e = Drag.fixE(e);
		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
		o.root.onDragStart(x, y);

		o.lastMouseX	= e.clientX;
		o.lastMouseY	= e.clientY;

		if (o.hmode) {
			if (o.minX != null)	o.minMouseX	= e.clientX - x + o.minX;
			if (o.maxX != null)	o.maxMouseX	= o.minMouseX + o.maxX - o.minX;
		} else {
			if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
			if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
		}

		if (o.vmode) {
			if (o.minY != null)	o.minMouseY	= e.clientY - y + o.minY;
			if (o.maxY != null)	o.maxMouseY	= o.minMouseY + o.maxY - o.minY;
		} else {
			if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
			if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
		}

		document.onmousemove	= Drag.drag;
		document.onmouseup		= Drag.end;

		return false;
	},

	
		
	drag : function(e)
	{

		e = Drag.fixE(e);
		var o = Drag.obj;

		var ey	= e.clientY;
		var ex	= e.clientX;

		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
		var nx, ny;

		if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
		if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
		if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
		if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

		nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
		ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

		if (o.xMapper)		nx = o.xMapper(y)
		else if (o.yMapper)	ny = o.yMapper(x)

		Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
		Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
		Drag.obj.lastMouseX	= ex;
		Drag.obj.lastMouseY	= ey;

		Drag.obj.root.onDrag(nx, ny);
		return false;

	},

	end : function()
	{
		document.onmousemove = null;
		document.onmouseup   = null;
		Drag.obj.root.onDragEnd(	parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
									parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
		Drag.obj = null;
	},

	fixE : function(e)
	{

		if (typeof e == 'undefined') e = window.event;
		if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
		if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
		return e;
	}
	
};

</script>

<style type="text/css">
	#root {
		position:absolute;
		height:300px;
		width:300px;
		background-color:#F4F4F4;
		border:1px solid #333;
		}

	#handle {
		margin:2px;
		padding:2px;
		width: 98%;
		color:white;
		background-color: navy;
		font-weight: bold;
		}
</style>

<div id="root" style="left:50px; top:100px;">
	<textarea style="width:200px; height:100px;"></textarea>
</div>

<script language="javascript">
	var theRoot   = document.getElementById("root");
	Drag.init(theRoot);
</script>
```

Permalänk: https://www.webforum.nu/p/1909641

## #6 — voigtann1, 2006-12-13T12:06Z

fungera på min FF2...

red.

\*ops\* nope det gjorde den inte :)

Kollar...

Permalänk: https://www.webforum.nu/p/1909642

## #7 — voigtann1, 2006-12-13T12:09Z

Fungera om jag högerklickar 1 ggr... känns som något med position eller något?

Permalänk: https://www.webforum.nu/p/1909644

## #8 — Peter S, 2006-12-13T12:09Z

Uppstår samma problem om du plockar bort all JS? Om så är fallet är problemet av HTML-/CSS-karaktär och bör flyttas till grannforumet. Sannolikheten är högre att mysteriet avhjälps där  :)

Permalänk: https://www.webforum.nu/p/1909645

## #9 — learn, 2006-12-13T12:56Z

Problemet försvinner när jag plockar bort all JS.

Det fungerar som sagt när man högerklickat en gång...

Hur ska jag göra för att få FF att bete sig som t.ex. IE i detta fall??

Permalänk: https://www.webforum.nu/p/1909659

## #10 — learn, 2006-12-13T13:43Z

Nä jag lyckas verkligen inte fixa detta..! Riktigt jobbig FF-bugg!

Någon som har någon aning om hur jag kan kringgå buggen??

Permalänk: https://www.webforum.nu/p/1909672

## #11 — learn, 2006-12-14T11:15Z

Hmmm, ingen som kan hjälpa mig denna oerhört jobbiga bugg??!

please

Permalänk: https://www.webforum.nu/p/1909988

## #12 — Peter S, 2006-12-14T15:34Z

Jag skulle gärna hjälpa till men FF och jag har tydligen någonting otalt med varandra - FF äter allt minne själv utan att dela med sig till de andra processerna  :(

Permalänk: https://www.webforum.nu/p/1910057

---

Tråden på webben: https://www.webforum.nu/amne/javascript/154833-flyttbar-div-med-textarea