---
title: "Drag layer"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/91322-drag-layer"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "bagera"
published: "2003-11-26T10:26:58.000Z"
updated: "2003-11-27T16:05:56.000Z"
replies: 4
views: 327
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/91322-drag-layer"
---

# Drag layer

## #1 — bagera, 2003-11-26T10:26Z

detta är ett script som ändrar bakgrundsfärgen när man 
drar i ett lager.
Hur ska jag bete mig för att på onload dra det automatisk.

onload = dra id="knobImg1" till top 45px
 alltså simulera en dragning av mus.

\<html\>
\<head\>
\<title\>Untitled Document\</title\>
\<style\>.drag {position: relative; cursor: hand}\</style\>
\<SCRIPT LANGUAGE="JavaScript1.2"\>

var sPosition;
var showPerc=100;
document.onmousedown=dragLayer
document.onmouseup=new Function("dragMe=false")

var Color= new Array();
Color\[0\] = "00";
Color\[1\] = "11";
Color\[2\] = "22";
Color\[3\] = "33";
Color\[4\] = "44";
Color\[5\] = "55";
Color\[6\] = "66";
Color\[7\] = "77";
Color\[8\] = "88";
Color\[9\] = "99";
Color\[10\] = "AA";
Color\[11\] = "BB";
Color\[12\] = "CC";
Color\[13\] = "DD";
Color\[14\] = "EE";
Color\[15\] = "FF";

var rVal,gVal,bVal, cCol, cCol2
function chgBg() {
	
	cCol = document.bgColor; rVal=cCol.substr(1,2); gVal=cCol.substr(3,2); bVal=cCol.substr(5,2);
	ind = Math.round(showPerc/16); if (ind \< 0) ind = 0; if (ind \> 15) ind=15;
if (kObj.id =="knobImg") document.bgColor="#"+Color\[ind\]+gVal+bVal;
}

var dragMe=false, kObj, yPos,direction
function moveLayer(who) {
if (event.button==1 && dragMe) {
	oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos; 

	if (kObj.style.pixelTop \> oldY) direction="dn"; else direction="up";
	if (kObj.style.pixelTop \< 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";}
	if (kObj.style.pixelTop \> 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";}

	sPosition=kObj.style.pixelTop; showPerc = (perCent\[0\].checked) ? sPosition-2 : (sPosition-2)/2\*5; 

	chgBg(who); 
	return false; }
}
function dragLayer() {
if (!document.all) return;
if (event.srcElement.className=="drag")	{dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientY; document.onmousemove=moveLayer; }
}
\</script\>
\</head\>

\<body\>
\<div id="outerLyr" style="position:absolute; width:23px; height:120px; z-index:1; left: 200px; top: 111px; background-color: #000000"\> 
  \<img src="knob.gif" width="20" height="17" class="drag" id="knobImg" style="width: 20px; height: 17px; z-index:3; left: 2px; top: 100px"\> 
  \<div id="innerLyr" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px"\> 
    \<div id="barLyr" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"\>\</div\>
  \</div\>
\</div\>
\<input type="radio" name="perCent" value="false"\>
100 
\<input type="radio" name="perCent" value="true" checked\>255
\</body\>
\</html\>

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

## #2 — bagera, 2003-11-26T12:54Z

jag la till 

function move(Id,y)	
{	
		document.getElementById(Id).style.top = y+'px';
}

onLoad="move('knobImg',40);"

men jag vill ju ha med värdet så bakgrunds färgen ändras, får liksom inte till det.

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

## #3 — Jojoxx, 2003-11-26T16:54Z

Detta script är IE-only så jag fortsätter på samma sätt. Före \</script\> lägger du till;

```
window.onload=function(){
	kObj=document.all['knobImg']; kObj.style.pixelTop=45; showPerc=45*2.56; chgBg();
}
```

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

## #4 — bagera, 2003-11-27T12:57Z

Tack men nix, det funkar inte.
man tror att det funkar tills man skriver ett värde på tex 90 å då 
händer inget.
Tacksam för lite hjälp, jag sliter mitt hår å försöker förstå men icke :(

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

## #5 — Jojoxx, 2003-11-27T16:05Z

Prova nu efter redigeringen.

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/91322-drag-layer