Drag multiple images

[Chaim]

You are amazing! Both scripts work. Infinite images + and smooth dragging + also works in IE8.

[Chaim]

IE8 and Firefox are working fine. Now Google Chrome is giving me a blue box when I select an object. I added some more features: Refresh and a question box at:
http://www.koltora.com/math/ Could you have a look? Thanks

[vwphillips]

try

<script type="text/javascript">
/*<![CDATA[*/
// Drag and Drop (04-August-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.
//  Options allow the use of 'right' and 'bottom' in place of 'left' and top' respectively.

// ***** 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 = (optional) the object to dragged on mousemove.                           (object, default to parameter 1 object)
//  parameter 3 = (optional) a string containing 'x' to drag x and/or 'y' to drag y.       (string, default 'xy')
//                 the default style positions are 'left' and 'top'
//                 to use 'right' include 'r', to use 'bottom' include 'b'.
//  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.85K

// ****** 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.xmde=dxy.indexOf('r')<0?'left':'right';
 this.ymde=dxy.indexOf('b')<0?'top':'bottom';
 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){
 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 (ev.target) 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.xmde=='left'?1:-1)),this.mm[1]),Math.min(Math.max(this.mm[2],this.pos[1]+(mse[1]-this.lastXY[1])*(this.ymde=='top'?1:-1)),this.mm[3])];
  if (this.dx) this.dobj.style[this.xmde]=this.pos[0]+'px';
  if (this.dy) this.dobj.style[this.ymde]=this.pos[1]+'px';
  this.lastXY=mse;
  if (this.mf) this.mf(this,ev);
 }
 if (ev.target) 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,'')],10);
 return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p.toLowerCase()),10);
}

function zxcCkEventObj(e,p){
 if (!e) var e=window.event;
 e.cancelBubble=true;
 if (e.stopPropagation) e.stopPropagation();
 if (e.target) eobj=e.target;
 else if (e.srcElement) eobj=e.srcElement;
 if (eobj.nodeType==3) eobj=eobj.parentNode;
 var eobj=(e.relatedTarget)?e.relatedTarget:(e.type=='mouseout')?e.toElement:e.fromElement;
 if (!eobj||eobj==p) return false;
 while (eobj.parentNode){
  if (eobj==p) return false;
  eobj=eobj.parentNode;
 }
 return true;
}


/*]]>*/
</script>

[Chaim]

Is there a way to refresh only the game portion of the web page? If I refresh the whole page the questions also reset back to the first question.
I would like the user to be able to reset the board. Also when the user presses the next question the next question should appear with a new board. http://koltora.com/math/
Thanks again Chaim

[vwphillips]

<script type="text/javascript">

/***********************************************
* DHTML slideshow script-  © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var photos=new Array()
var photoslink=new Array()
var which=0

//define images. You can have as many as you want:
photos[0]="http://koltora.com/math/photo_i.jpg"
photos[1]="http://koltora.com/math/photo1.jpg"
photos[2]="http://koltora.com/math/photo2.jpg"
photos[3]="http://koltora.com/math/photo3.jpg"
photos[4]="http://koltora.com/math/photo4.jpg"
photos[5]="http://koltora.com/math/photo5.jpg"
photos[6]="http://koltora.com/math/photo6.jpg"
photos[7]="http://koltora.com/math/photo7.jpg"
photos[8]="http://koltora.com/math/photo8.jpg"
photos[9]="http://koltora.com/math/photo9.jpg"
photos[10]="http://koltora.com/math/photo10.jpg"
photos[11]="http://koltora.com/math/photo11.jpg"
photos[12]="http://koltora.com/math/photo12.jpg"
photos[13]="http://koltora.com/math/photo13.jpg"
photos[14]="http://koltora.com/math/photo14.jpg"
photos[15]="http://koltora.com/math/photo_e.jpg"

//Specify whether images should be linked or not (1=linked)
var linkornot=0

//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]=""
photoslink[1]=""
photoslink[2]=""

//do NOT edit pass this line

var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}


function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}



function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}


function backward(){
if (which>0){
Reset();
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
Reset();
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function transport(){
window.location=photoslink[which]
}

function Reset(){
 for (var z0=0;z0<CAry.length;z0++){
  CAry[z0].parentNode.removeChild(CAry[z0]);
 }
 CAry=[];
}

</script>

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

var CAry=[];

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

<input type="button" name="" value="Reset" onclick="Reset();" />

[Chaim]

I am having trouble integrating the code in the page properly. I feel so stupid for asking, but could you integrate it.

[vwphillips]

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

[Chaim]

What can I say..... Thanks, Thanks, Thanks - Chaim

[Chaim]

Dear Vic, I need a function to delete selected images that are chosen with ctrl + mouse click. Could you solve this one. Thanks Chaim

[vwphillips]

// modified function
function MakeClone(obj){
 var e=window.event||arguments.callee.caller.arguments[0];
 var clone=obj.cloneNode(true);
 document.body.appendChild(clone);
 CAry.push(clone);
 clone.style.zIndex=zxcLTZ(obj,'z-Index')+1;
 clone.onclick=function(){ RemoveClone(this); }
 var oop=new zxcDrag(clone,false,'xy',null,DragRemove,null,DragAdd);
 oop.down(e);
}
// new function
function RemoveClone(obj){
 var e=window.event||arguments.callee.caller.arguments[0];
 if (e.ctrlKey){
  obj.parentNode.removeChild(obj)
 }
}