Flytta tabell med hjälv av CSS

JavaScript

2 svar · 240 visningar · startad av tronez

Medlem sedan juli 2001728 inlägg
Trådstart#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 ?

Medlem sedan dec. 20025 483 inlägg
#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>

:)

Medlem sedan juli 2001728 inlägg
#3

tack, nu funkade det lite bättre!

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

257 ms totalt · 4 externa anrop · v20260731065814-full.d34c6d5a
119 ms — deklarationer (db)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)
119 ms — ändringar (db)