Flytta tabell med hjälv av CSS

2 svar · 237 visningar · startad av tronez 4 maj 2004

tronezMedlem sedan juli 2001728 inlägg

4 maj 2004 20:17#1

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

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 ?

Peter SMedlem sedan dec. 20025 483 inlägg

7 maj 2004 10:58#2

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>

tronezMedlem sedan juli 2001728 inlägg

7 maj 2004 14:00#3

tack, nu funkade det lite bättre!

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