Page 1 of 7 123 ... LastLast
Results 1 to 10 of 62

Thread: Drag multiple images

  1. #1
    Join Date
    Jul 2009
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Drag multiple images

    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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    how do you select the multiple images?
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jul 2009
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Jul 2009
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Jul 2009
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #9
    Join Date
    Jul 2009
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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;
    }
    Last edited by vwphillips; 08-03-2009 at 09:58 AM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    Manhattan (08-05-2009)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •