Drag multiple images

**Chaim** · 07-20-2009, 04:29 PM

I am working on a math game which requires the user to select multiple images and drag them off a scale and drop them. I am using the Dom drag and drop Script which does one image drag perfectly. Can any one suggest a solution to select multiple images and drag them simultaneously. The page is at http://koltora.com/math/ Thanks Chaim

**vwphillips** · 07-21-2009, 09:12 AM

how do you select the multiple images?

**Chaim** · 07-26-2009, 07:08 PM

The user selects the images with the left mouse buttton, holding down the control key.

**vwphillips** · 07-27-2009, 09:18 AM

Code:

<html>
<head>
<style type="text/css">
/*<![CDATA[*/
.drag {
  position:absolute;left:100px;top:100px;width:50px;height:50px;background-Color:red;
}

/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/
// Drag and Drop (14-April-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// To Drag and drop an element.
// The drag may be executed from the draggable object or a nested element(drag panel)
// Minimum and maximum drag limits may be specified for both 'X' and 'Y' coordinates.
// Specified functions may be called on mousedown, move or mouse up of the object.
//
// There may be as many applications as required on a page.

// ****** Application Notes

// ***** The HTML and CSS Code
//
//  The drag objects position must assigned as 'relative' or absolute'
//  and the 'left', top' and 'z-Index' assigned by the drag objects style class or inline style


// ***** Initialising the Script
//
// The script would normally initialised by a BODY or window event call assign the instance of the script to a variable.
// e.g.
// var oop=new zxcDrag(document.getElementById('tst'),false,'xy',[0,300,0,250])
// where:
//  parameter 1 = the object to activate drag on mousedown.                                (object)
//  parameter 2 = the object to dragged on mousemove.                                      (object, or false to default to parameter 1)
//  parameter 3 = (optional) a string containing 'x' to drag x and/or 'y' to drag y.       (string, default 'xy')
//  parameter 4 = (optional) an array defining the minimum and maximum x and y coordinates (array, default [])
//                 where:
//                 field 0 = the minimum x cordinate. (digits, null = not set)
//                 field 1 = the maximum x cordinate. (digits, null = not set)
//                 field 2 = the minimum y cordinate. (digits, null = not set)
//                 field 3 = the maximum y cordinate. (digits, null = not set)
//  parameter 4 = (optional) a function name to be called on mouseup(see Note 2).          (function object)
//  parameter 5 = (optional) a function name to be called on mousemove(see Note 2).        (function object)
//  parameter 6 = (optional) a function name to be called on mousedown(see Note 2).        (function object)

// Note 1:
//  On mousedown of the object the object z_index is increased by 10.
//  On the mouseup the z-Index is restored to the original z-Index.

// Note 2:
//  When a function is called the zxcDrag function is passed to the function.
//  The drag object may be access by argument[0].dobj, and the event as argument[1].
//  e.g.
//   function Test(obj,evt){
//    alert(obj.dobj);
//    alert(evt.type);
//   }


// Functional Code Size 2.17K

// ****** Functional Code - NO NEED to Change

function zxcDrag(obj,root,dxy,mm,uf,mf,df){
 this.dobj=root?root:obj;
 mm=mm||['x','x','y','y'];
 dxy=(dxy||'xy').toLowerCase();
 this.dx=dxy.indexOf('x')>-1?true:false;
 this.dy=dxy.indexOf('y')>-1?true:false;
 this.mm=[typeof mm[0]=='number'?mm[0]:-100000,typeof mm[1]=='number'?mm[1]:100000,typeof mm[2]=='number'?mm[2]:-100000,typeof mm[3]=='number'?mm[3]:100000];
 this.df=df||false; this.mf=mf||false; this.uf=uf||false;
 this.addevt(obj||root,'mousedown','down');
 this.addevt(document,'mousemove','move');
 this.addevt(document,'mouseup','up');
 return this;
}

zxcDrag.prototype.down=function(ev){
 document.onselectstart=function(event){ window.event.returnValue=false; }
 this.lastXY=[ev.clientX,ev.clientY];
 this.drag=true;
 this.dobj.style.zIndex=zxcLTZ(this.dobj,'z-Index')+10+'';
 this.pos=[zxcLTZ(this.dobj,'left'),zxcLTZ(this.dobj,'top')];
 if (this.df) this.df(this,ev);
 if (!window.event) ev.preventDefault();
 return false;
}

zxcDrag.prototype.move=function(ev){
 if (this.drag){
  var mse=[ev.clientX,ev.clientY];
  this.pos=[Math.min(Math.max(this.mm[0],this.pos[0]+mse[0]-this.lastXY[0]),this.mm[1]),Math.min(Math.max(this.mm[2],this.pos[1]+mse[1]-this.lastXY[1]),this.mm[3])];
  if (this.dx) this.dobj.style.left=this.pos[0]+'px';
  if (this.dy) this.dobj.style.top=this.pos[1]+'px';
  this.lastXY=mse;
  if (this.mf) this.mf(this,ev);
 }
 if (!window.event) ev.preventDefault();
 return false;
}

zxcDrag.prototype.up=function(ev){
 if (this.drag){
  this.drag=false;
  this.dobj.style.zIndex=zxcLTZ(this.dobj,'z-Index')-10+'';
  if (this.uf) this.uf(this,ev);
  document.onselectstart=null;
 }
}

zxcDrag.prototype.addevt=function(o,t,f){
 var oop=this;
 if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e);}, false);
 else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e); });
 else {
  var prev=o['on'+t];
  if (prev) o['on'+t]=function(e){ prev(e); oop[f](e); };
  else o['on'+t]=o[f];
 }
}

function zxcLTZ(obj,p){
 if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')]);
 return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p.toLowerCase()));
}


/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){
 var ds=zxcByClassName('drag')
 for (var oop,z0=0;z0<ds.length;z0++){
  oop=new zxcDrag(ds[z0],false,'xy',null,DragRemove,null,DragAdd);
 }
}

function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}

var DObjs=[]

function DragAdd(oop,e){
 if (e.ctrlKey){
  DObjs.push(oop);
  oop.drag=false;
 }
 else {
  for (var z0=0;z0<DObjs.length;z0++){
   if (DObjs[z0]!=oop) DObjs[z0].down(e);
  }
 }
}

function DragRemove(oop,e){
 if (!e.ctrlKey) DObjs=[];


}
/*]]>*/
</script></head>

<body onload="Init();">

<div class="drag" ></div>
<div class="drag" style="left:300px;"></div>
</body>
</html>

**Chaim** · 07-27-2009, 10:29 PM

You are amazing!
Thank you so much for helping me.
Your code works in Firefox but it is unclear when the user is clicking the images.
Is there a way to indicate that the image was chosen. Like a line around the image when it is selected.
Unfortunately the code did not work at all in Chrome
In IE8 it says out of memory line 126
Where in the code do I substitute my images for the boxes you drew.
Thanks again

**vwphillips** · 07-28-2009, 08:38 AM

to add a border

Code:

function DragAdd(oop,e){
 if (e.ctrlKey){
  DObjs.push(oop);
  oop.drag=false;
  oop.dobj.style.border='solid black 1px';
 }
 else {
  for (var z0=0;z0<DObjs.length;z0++){
   if (DObjs[z0]!=oop) DObjs[z0].down(e);
  }
 }
}

function DragRemove(oop,e){
 if (!e.ctrlKey){
 for (var z0=0;z0<DObjs.length;z0++){
  DObjs[z0].dobj.style.borderWidth='0px';
 }
  DObjs=[];
 }
}

Unfortunately the code did not work at all in Chrome
In IE8 it says out of memory line 126

I tested in Chrome and IE7 and it was OK

provide a link to your test page so I can check

Where in the code do I substitute my images for the boxes you drew.

give your images a class name of drag and

// ***** The HTML and CSS Code
//
// The drag objects position must assigned as 'relative' or absolute'
// and the 'left', top' and 'z-Index' assigned by the drag objects style class or inline style

**Chaim** · 07-28-2009, 10:45 PM

Sorry for my mistake. I tested it locally. When I uploaded it to www.koltora.com/drop.html it works in Firefox and Chrome but I still get the out of memory line 126 error in IE8. Could I ask you to give me a complete example of the code - integrating you box outline code over an example image. Thank you again for your wisdom and patience.

**vwphillips** · 07-29-2009, 10:05 AM

http://www.vicsjavascripts.org.uk/DragDrop/090728A.htm

the ammended Drag & Drop script has been ammended to accept 'right' and 'bottom'

I am reluctent to install IE8

**Chaim** · 07-29-2009, 01:07 PM

I understand your reluctance about IE8. They may eventually join the standards club. I put your code on my site http://koltora.com/math/ and it works perfectly on Firefox and Chrome. It has a little delay in the initial drag stage but that is not significant. Thank you again. I searched for a solution for many hours for this problem and could not find anyone to address the issue of multiple drag and drop. You were ever so kind to even write the script. Much appreciation and many thanks from a novice to a true professional. Chaim

**vwphillips** · 08-03-2009, 09:46 AM

from pm

Thanks again. I want to clone my images. So that when the user picks a pawn for example another pawn appears underneath and can also be selected.
I have done this in a simple way by copying and renaming the images *b.gif. As you can see in the script at my site http://koltora.com/math/
Is there a simple way to make an infinite number of image by writing a formula?
Forward Message

Code:

.........

function Clone(cls){
 var ds=zxcByClassName(cls)
 for (var oop,z0=0;z0<ds.length;z0++){
  ds[z0].onmousedown=function(){ MakeClone(this); }
 }
}

function MakeClone(obj){
 var e=window.event||arguments.callee.caller.arguments[0];
 var clone=obj.cloneNode(true);
 document.body.appendChild(clone);
 clone.style.zIndex=zxcLTZ(obj,'z-Index')+1;
 var oop=new zxcDrag(clone,false,'xy',null,DragRemove,null,DragAdd);
 oop.down(e);
}
/*]]>*/
</script>
</head>

<body bgcolor="#FFFF00" onload="Init();Clone('clone');">
<img class="clone" id="w01a" src="http://koltora.com/math/w01.gif" style="position:absolute; left:850px; top:100px" />
<img class="clone" id="b01a" src="http://koltora.com/math/b01.gif" style="position:absolute; left:750px; top:100px" />
.........

also try changing this function for your IE8 problem

Code:

zxcDrag.prototype.down=function(ev){
 if(!this.drag){
  document.onselectstart=function(event){ window.event.returnValue=false; }
  this.lastXY=[ev.clientX,ev.clientY];
  this.drag=true;
  this.dobj.style.zIndex=zxcLTZ(this.dobj,'z-Index')+10+'';
  this.pos=[zxcLTZ(this.dobj,this.xmde),zxcLTZ(this.dobj,this.ymde)];
  if (this.df) this.df(this,ev);
 }
 if (!window.event) ev.preventDefault();
 return false;
}

Thread: Drag multiple images

Thread Tools

Search Thread

Drag multiple images

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions