Drag&Drop together with a layer

**lelu** · 04-01-2007, 02:47 PM

1) Script Title: DOM Drag&Drop script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/domdrag/

3) Describe problem:
link: http://www.easyto.eu/drag-test.htm

Is it possible to move the layer (in this case is a button) together with a map?
Please help, if there are any other ways to make it? Or somehow to fastened it to the certain place in the map?

**mburt** · 04-01-2007, 02:56 PM

Add this to the map event handler

Code:

function movewith(obj,objmove) {
var ob1 = document.getElementById(obj),
obj2 = document.getElementById(objmove);
obj2.style.left=obj1.offsetLeft+"px";
obj2.style.top=obj1.offsetTop+"px";
}
//on the event handler: movewith("handle","dam5.jpg")

**jscheuer1** · 04-01-2007, 03:13 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
#example {
position:relative;
width:875px;
}
#layer1 {
position:absolute;
width:100px;
height:100px;
z-index:1;
left:332px;
top:150px;
}
</style>
<script type="text/javascript" src="dom-drag.js"></script>
</head>
<body>
<div id="example">
<div id="layer1">
<img alt="" src="sights-button.gif" width="39" height="40">
</div>
<img src="austria/map-wien.gif" alt="">
</div>
<script type="text/javascript">
Drag.init(document.getElementById("example"));
</script>
<div>
<img alt="" src="austria/map-wien.gif" width="875" height="638">
</div>
</body>
</html>

**lelu** · 04-01-2007, 03:48 PM

Thank you very much, it works. But one weird thing... it can not recognize the "layer2"? It works only for layer 1 and 3.

http://www.easyto.eu/drag-test.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
#example {
position:relative;
width:875px;
}
#layer1 {
position:absolute;
width:100px;
height:100px;
z-index:1;
left:332px;
top:150px;
}
</style>
<script type="text/javascript" src="dom-drag.js"></script>
</head>
<body>

<div id="example">
<div id="layer1" style="position: absolute; left: 295px; top: 100px; width: 37px; height: 40px">
<img alt="" src="sights-button.gif" width="39" height="40">
</div>

<div id="example">
<div id="layer2" style="position: absolute; left: 399px; top: 95px; width: 37px; height: 40px">
<img alt="" src="sights-button.gif" width="39" height="40">
</div>

<div id="example">
<div id="layer3" style="position: absolute; left: 529px; top: 96px; width: 37px; height: 40px">
<img alt="" src="sights-button.gif" width="39" height="40">
</div>

<img src="austria/map-wien.gif" alt="">
</div>
<script type="text/javascript">
Drag.init(document.getElementById("example"));
</script>
<div>
 </div>
</body>
</html>

**jscheuer1** · 04-01-2007, 04:11 PM

You can only have one element on a page with a given id. If you want more than one dragable element, you need to give each one a unique id and initialize them separately to the script. Also, in your layout, any element that you wish to have move with a given dragable element, must be contained in that dragable element.

From my original example:

Code:

<div id="example"> <!-- only one element with id 'example' -->
<div id="layer1"> <!-- this element is contained in the dragable 'example' element -->
<img alt="" src="sights-button.gif" width="39" height="40">
</div>
<img src="austria/map-wien.gif" alt=""> <!-- this element is contained in the dragable 'example' element -->
</div>
<script type="text/javascript">
Drag.init(document.getElementById("example")); //initialization for 'example' element
</script>

**lelu** · 04-01-2007, 04:19 PM

Thank you so very much for explanations !!!
it works!!!

Thread: Drag&Drop together with a layer

Thread Tools

Search Thread

Drag&Drop together with a layer

Bookmarks

Bookmarks

Posting Permissions