Drag and drop med Scriptaculous
Hejsan, försöker som en labb inför ett större projekt göra så att jag lägger små rutor i större rutor, och de hamnar alltid i mitten av de större rutorna. Men hittills har jag problem med att de små rutorna hamnar bakom de större. Vet någon hur z-index alternativet för Draggables fungerar?
Såhär ser min kod ut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
body {
background-color: #333333;
}
.dropzone {
border: 2px solid red;
background-color: lime;
height: 100px;
width: 200px;
position: absolute;
}
.dropzone:hover {
background-color: navy;
}
.dropper {
border: 2px solid #DD0000;
height: 50px;
width: 45px;
position: absolute;
background-color: #00BBCC;
}
</style>
<title>DOM-labb</title>
</head>
<body>
<div class ="dropper" id = "d1" style = "top: 500px; left: 300px;"></div>
<div class ="dropper" id = "d2" style = "top: 500px; left: 200px;"></div>
<div class = "dropzone" id="square1_1" style="top: 20px; left: 40px;"></div>
<div class = "dropzone" id="square1_2" style="top: 20px; left: 280px;"></div>
<div class = "dropzone" id="square1_3" style="top: 20px; left: 520px;"></div>
<div class = "dropzone" id="square2_1" style="top: 140px; left: 40px;"></div>
<div class = "dropzone" id="square2_2" style="top: 140px; left: 280px;"></div>
<div class = "dropzone" id="square2_3" style="top: 140px; left: 520px;"></div>
<div class = "dropzone" id="square3_1" style="top: 260px; left: 40px;"></div>
<div class = "dropzone" id="square3_2" style="top: 260px; left: 280px;"></div>
<div class = "dropzone" id="square3_3" style="top: 260px; left: 520px;"></div>
<script type="text/javascript">
new Draggable ('d1',{ zindex: 1});
new Draggable ('d2',{ zindex: 5});
Droppables.add ("square1_1",{ accept: "dropper"});
</script>
</body>
</html>
