flytta bild med musen?

Så här kan man göra med ett lager:

<script type="text/javascript">
var g_elementId = null;
var g_currentX = 0, g_currentY = 0;
var g_startX = 0, g_startY = 0;
var g_elCurrentX = 0, g_elCurrentY = 0;
var g_elStartX = 0, g_elStartY = 0;

function startMove(elementId)
{
	g_elementId = elementId;
	
	g_startX = g_currentX;
	g_startY = g_currentY;
}

document.onmouseup = function()
{
	g_elementId = null;
	
	g_elStartX = g_elCurrentX;
	g_elStartY = g_elCurrentY;
}

document.onmousemove = function(e)
{
	g_currentX = (e ? e.pageX : event.screenX);
	g_currentY = (e ? e.pageY : event.screenY);
	
	if (g_elementId && document.getElementById(g_elementId))
	{
		g_elCurrentX = g_elStartX + (g_currentX - g_startX);
		g_elCurrentY = g_elStartY + (g_currentY - g_startY);
		
		var el = document.getElementById(g_elementId);
		el.style.left = g_elCurrentX + "px";
		el.style.top = g_elCurrentY + "px";
	}
}
</script>
<style type="text/css">
BODY {
	margin: 0px;
}
DIV {
	background-color: #0000FF;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100px;
	height: 100px;
}
</style>

<div id="foo" onMouseDown="startMove('foo');"></div>

Men finns säkert snyggare lösningar.

Okey. sjysst med en hel lösning men jag förstår den inte riktigt..

Här t.ex tilldelas onmousemove function(e). förstår inte alls den raden..

document.onmousemove = function(e)

Sen dessa rader, vad sparas i variablerna??

	g_currentX = (e ? e.pageX : event.screenX);
	g_currentY = (e ? e.pageY : event.screenY);

Mvh

1. När musen rör sig så körs funktionen. e är event objektet som skickas in i t.ex. Mozilla.

2. g_currentX är var musen befinner sig i X-led. g_currentX i Y-led.

Du tilldelar funktionen onmousemove en ny funktion.
istället för att att först skapa en egen funktion t.ex.
function myMouseMove(e)
{
...
}
och sedant tilldela document.onmousemove denna.
document.onmousemove = myMouseMove;
Så kan man slippa lite kodskrivande genom att direkt tilldela document.onmosuemove funktions-definitionen.

koden slutar inte efter function(e) utan fortsätter i {} blocket som kommer under.

document.onmousemove = function(e)
{
	g_currentX = (e ? e.pageX : event.screenX);

g_currentX = (e ? e.pageX : event.screenX);

Skulle även kunna skrivas som

if(e)
  g_currentX = e.pageX;
else
  g_currentX = event.screenX;

Så det är bara ett mer kompakt sätt att skriva koden på.

Vet inte om detta var någon bättre förklaring.

jag måst va dum för det här stycket fattar jag inte

document.onmousemove = function(e)
{
	g_currentX = event.screenX;
	g_currentY = event.screenY;
	
	if (g_elementId && document.getElementById(g_elementId))
	{
		g_elCurrentX = g_elStartX + (g_currentX - g_startX);
		g_elCurrentY = g_elStartY + (g_currentY - g_startY);
		
		var el = document.getElementById(g_elementId);
		el.style.left = g_elCurrentX + "px";
		el.style.top = g_elCurrentY + "px";
	}

function(e) ? kan inte förstå det riktigt?? Resterande rader förstår jag. Är det beroende på webläsare om man använder event eller e?? kör explorer så jag tog bort e.screenY och X...

det finns alltså ingen function(e), man skapar en ny annonym funktion (utan namn). man definierar alltså bara vad funktionen ska göra.

ok. Får väll försöka trycka in det i skallen...

men en bugg i ovanstående skript är ju att den utgår från noll i både X och y när du ska flytta objektet. Om du från start placerat lagret på en annan punkt t.ex X:150 Y:350..

kan man läsa in nuvarande värde för ett lager??

Jo en anna sak. Är det något fel i att bygga en web sida med bara lager och positionera dem??

Men varför fungerar inte detta ex. Om jag byter ut page mot screen så går det men det blir en förskjutning varje gång jag börjar röra musen??

<script type="text/javascript">
var g_elementId = null;

function startMove(elementId)	{
	g_elementId = elementId;
}

document.onmouseup = function()	{
	g_elementId = null;
}

document.onmousemove = function(e)	{

		var el = document.getElementById(g_elementId);
		el.style.left = event.pageX;
		el.style.top = event.pageY;
}
</script>

Du har ju helt tagit bort all intelligens i koden. Inte konstigt att det blir fel.

Du sätter postionen till där musen är oavsett om man tryckt ner knappen. Inte konstigt att det blir en förskjutning...

event.pageX finns inte.

ok, denna borde varit med.

if (g_elementId && document.getElementById(g_elementId))	{

men iom att man lägger in objektets namn i en variabel så händer det ju inget om man inte lagra namnet på objektet i variabel.. Men det blir lite errors :)

Det funkar jusom jag gjort nu men screenX räknar ju från relativt från skärmen!! Vill ju räkna relativt sidan istället, det var det jag trodde pageX gjorde. så som det är nu så förskjuts ju Y-led med ca 100px.

pageX finns inte i event objektet.
http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_event.asp

clientX visar sidpositionen, fast räknar inte med om man har scrollat så det måste man plussa på.
Även om du kan få ut sidpositionen så kommer din kod bli felaktig eftersom att lagret kommer hoppa till musen och inte relativt från hur man drar lagret.

Varför kan du inte använda koden jag skrev. Från mina tester så upptäckte jag inget konstigt. Men du kanske hittade något fel?

Nää, kanonkod. Sjysst a du gjorde hela lösningen. Grejen var att jag ville börja enkelt bara, lite för enkelt :e
Hitta en gammal bok där det står att event har egenskapen PageX. Konstig bok..

Men i ditt exempel; om man har flera lager. Börjar du flytta ett annat lager så får ju det positionen från föregående lagers sista position ?? hur löser man det?

Boken gick efter standarden vilket Internet Explorer inte gör.
I mitt exempel använder jag pageX för t.ex. Mozilla.

Exempel på hur man kan hantera olika lager:

<script type="text/javascript">
var g_elementId = null;
var g_currentX =0, g_currentY = 0;
var g_startX = [], g_startY = [];
var g_elCurrentX = [], g_elCurrentY = [];
var g_elStartX = [], g_elStartY = [];
var g_zIndex = 1;

function startMove(elementId)
{
	g_elementId = elementId;
	
	g_startX[g_elementId] = g_currentX;
	g_startY[g_elementId] = g_currentY;
	
	var el = document.getElementById(g_elementId);
	el.style.zIndex = g_zIndex++;
	
	setElementPosition();
}

document.onmouseup = function()
{
	g_elStartX[g_elementId] = g_elCurrentX[g_elementId];
	g_elStartY[g_elementId] = g_elCurrentY[g_elementId];
	
	g_elementId = null;
}

document.onmousemove = function(e)
{
	g_currentX = (e ? e.pageX : event.screenX);
	g_currentY = (e ? e.pageY : event.screenY);
	
	if (g_elementId && document.getElementById(g_elementId))
	{
		g_elCurrentX[g_elementId] = g_elStartX[g_elementId] + (g_currentX - g_startX[g_elementId]);
		g_elCurrentY[g_elementId] = g_elStartY[g_elementId] + (g_currentY - g_startY[g_elementId]);
		
		var el = document.getElementById(g_elementId);
		el.style.left = g_elCurrentX[g_elementId] + "px";
		el.style.top = g_elCurrentY[g_elementId] + "px";
	}
}

function setElementPosition()
{
	var el = document.getElementById(g_elementId);
	g_elStartX[g_elementId] = parseInt(el.style.left);
	g_elStartY[g_elementId] = parseInt(el.style.top);
}
</script>
<style type="text/css">
DIV {
	position: absolute;
	width: 100px;
	height: 100px;
}
</style>

<div id="foo" onMouseDown="startMove('foo');" style="background-color: #0000FF; left: 50px; top: 50px;"></div>
<div id="bar" onMouseDown="startMove('bar');" style="background-color: #FF0000; left: 200px; top: 200px;"></div>
<div id="snafu" onMouseDown="startMove('snafu');" style="background-color: #00FF00; left: 400px; top: 400px;"></div>
<div id="ogrish" onMouseDown="startMove('ogrish');" style="background-color: #FFFF00; left: 100px; top: 500px;"></div>

okey, så nu använder du arrayer??

måste inte varje variabel i en array ha ett nr, eller kan det bestå av namn och. Eller är jag bara ute och cyklar

I javascript kan de ha namn.

ok. bra att veta..

Tack för hjälpen.. kanske återkommer med mer frågor snart. Om du orkar mer...