Page 2 of 7 FirstFirst 1234 ... LastLast
Results 11 to 20 of 62

Thread: Drag multiple images

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

    Default

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

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

    Default

    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

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

    Default

    try

    Code:
    <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>
    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/

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

    Default

    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

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

    Default

    Code:
    <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>
    Code:
    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);
    }
    Code:
    <input type="button" name="" value="Reset" onclick="Reset();" />
    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/

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

    Default

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

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

    Default

    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/

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

    Default

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

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

    Default

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

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

    Default

    Code:
    // 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)
     }
    }
    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:

    Chaim (08-21-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
  •