how to: drag LOTS of images same page?

[debbie_walton]

1) Script Title: DOM Drag & Drop script

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

3) Describe problem: the script works fine, however, i'd like to use it on many multiples of an image (a building block). (i'd like to have an undepleatable stack of perhaps 40 or 50 blocks, all absolutely positioned one on top of the other, that can be moved over an architectural grid background to create a floor plan)

what is the easiest way? i don't want to use a separate id for each item if i don't have to, is there a way to combine the following:

<img id="block" src="block.gif" style="position: relative" >
<script type="text/javascript">
Drag.init(document.getElementById("block"));
</script>

<img id="block2" src="block.gif" style="position: relative" >
<script type="text/javascript">
Drag.init(document.getElementById("block2"));
</script>

<img id="block3" src="block.gif" style="position: relative" >
<script type="text/javascript">
Drag.init(document.getElementById("block2"));
</script>

etc, etc,

also, they mention soemthing about on page load, but they don't give an example of how to use this. would the page load method work better for my application?

any help would be GREATLY APPRECIATED!!

[ddadmin]

There are many ways to approach this, depending on whether you don't wish to give each IMG any ID attribute period, or that you simply don't want to have to manually declare them inside Drag.init() each time. Assuming the former, one way is to just assign images on the page you wish to be draggable a specific CSS class name, for example, "drag, and have the script dynamically scan and make them all draggable:


<img src="test.gif" class="drag" style="position: relative;" />
<img src="test.gif" class="drag" style="position: relative;" />
<img src="test.gif" class="drag" style="position: relative;" />
<img src="test.gif" style="position: relative;" />

<script type="text/javascript">

var allimages=document.getElementsByTagName("img")

for (var i=0; i<allimages.length; i++){
if (/drag/i.test(allimages[i].className)) //if image contains "drag" CSS class name
Drag.init(allimages[i])
}

</script>

Regarding page load, it simply means wrapping the initializtion code in window.onload:


<script type="text/javascript">

window.onload=function(){
var allimages=document.getElementsByTagName("img")

for (var i=0; i<allimages.length; i++){
if (/drag/i.test(allimages[i].className)) //if image contains "drag" CSS class name
Drag.init(allimages[i])
}
}
</script>