---
title: "Flytta tabell med hjälv av CSS"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/102928-flytta-tabell-med-hjälv-av-css"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "tronez"
published: "2004-05-04T20:17:37.000Z"
updated: "2004-05-07T14:00:39.000Z"
replies: 2
views: 240
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/102928-flytta-tabell-med-hjälv-av-css"
---

# Flytta tabell med hjälv av CSS

## #1 — tronez, 2004-05-04T20:17Z

Tjena, har pulat ihop ett litet script som fväl funkar ungefär som jag vill, men lite små fel som jag inte kan komma på en lösning på:

```
<style type="text/css">
#main{
	position: absolute;
	top: 250 px;
	left: 500 px;
	background-color: #D6D3CE;
	width: 250px;
	border: 1px solid black;
	border-style:solid;
}

#top{
	border-bottom: 1px solid black;

}
</style>

</head>

<body>
<script type="text/javascript">

function move()
{
	var main = document.getElementById("main")

	x = event.clientX
	y = event.clientY
	
	if(event.button == 1)
	{
		main.style.left = x -20;
		main.style.top  = y -10;
		
	}

}

</script>
  <table id="main">
    <tr>
      <td id="top"  onmousemove="move()"  height="20">testing</td>
    </tr>
    <tr>
      <td >sadsdöskads<br>sadsdöskads<br>sadsdöskads<br>
      sadsdöskads<br>sadsdöskads<br>sadsdöskads<br>sadsdöskads<br>
     </td>
    </tr>
  </table>
```

[Här finns mitt exempel](http://trones.mine.nu:47/sp/c/daf2/) 

Ni kan ju prova sjävlva, håll ner musknappen över testing å dra försiktigt så flyttar den sig dit man vill, menn om man tex klickar bredvid testing så buggar det ut totalt...

FInns det något vis att fixa så man kan klicka vart som helst i \<td\> taggen ?

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

## #2 — Peter S, 2004-05-07T10:58Z

Lek lite med detta:

```
<script type="text/javascript">

var main, pressed, xO, yO, left, top;

function move(evt) {
    evt = evt || window.event;

    if (pressed) {
	main.style.left = left + (evt.clientX - xO) + "px";
	main.style.top  = top + (evt.clientY - yO) + "px";
    }
}

function capt(evt) {
    evt = evt || window.event;

    pressed = true;
    left = main.offsetLeft;
    top = main.offsetTop;
    xO = evt.clientX;
    yO = evt.clientY;
}

document.onmouseup = function() { pressed = false }

window.onload = function() {
    main = document.getElementById("main");
}

</script>
  <table id="main">
    <tr>
      <td id="top" onmousedown="capt(event)" onmousemove="move(event)" height="20">testing</td>
    </tr>
    <tr>
      <td >sadsdöskads<br>sadsdöskads<br>sadsdöskads<br>
      sadsdöskads<br>sadsdöskads<br>sadsdöskads<br>sadsdöskads<br>
     </td>
    </tr>
  </table>
```

 :)

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

## #3 — tronez, 2004-05-07T14:00Z

tack, nu funkade det lite bättre!

Ska pula lite till å se om jag kan lyckas få det som jag vill! =)

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/102928-flytta-tabell-med-hjälv-av-css
