Results 1 to 7 of 7

Thread: Needed: Drop/Drag Javascript that limits where content can be dragged

  1. #1
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Needed: Drop/Drag Javascript that limits where content can be dragged

    I'm working with children with some rather severe learning disabilities, and have been making some simple javascript learning games for them using cut & paste scripts.

    I've searched several sites for a drop/drag script that would only allow an image to be dragged to a specific column with no luck. (Example: drag all things that begin with "A" to the "A" column, etc.) A div would work just as well, I imagine.

    I assume such a script would need to be configured to suit the specific game, and I can hopefully do that.

    If anyone could point me to such a script, or possibly tell me how to modify an existing drop/drag script, I'd really appreciate it.

  2. #2
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Would it help if I posted a link to a script that I think might do what I need, even though I haven't been able to get it to work?

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    Sure, that may help. At the very least it will give a visual of what you want.

    Honestly, though, that is reaching the extents of the ability of Javascript. This is not impossible, but anything much beyond that would be.
    Considering, you would definitely have more luck if you were able to use flash. Flash is a little harder to use than Javascript (just requires a bit more work to get into and can be more complex in some ways), but much better for anything graphics related and can create even very complex games.
    In the case of these children, you won't be worried about any of them trying to "hack" the games (like many users would be with Javascript), but on the other hand, with that audience you will instead be most concerned that it is reliable and consistent, and that is another thing that flash can help with.

    I don't know of any "touching" properties in javascript (image x is touching/overlapping column y), etc., though you could try to code some numerical values to check this: find the location of the image, find the location of the column, and then compare. However, this is going to not only take some fairly complex javascript and also some involved geometry to make it reliable.

    There may be another approach I haven't thought of.

    If you're serious about this, I'd suggest finding someone experienced (more than me) with Javascript and hiring them. This may become a fairly involved project.

    It's quite possible you could find a script already available, but for that you'll just have to search google. Because coders tend to think very literally, search for related words like "intersect", "overlap", "target", etc., and "div", "table", "element", etc.


    A while ago I remember seeing a script that was based on a game where you are trying to place rings around a pole. It's a fairly simple logic game played by children. Basically you have several rings of varying sizes and are trying to get them on the pole from biggest to smallest. I don't remember where that was, but if you could find that it might have some examples of the math you need, because that's basically the same operations, just applied differently.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,023
    Thanks
    44
    Thanked 3,209 Times in 3,171 Posts
    Blog Entries
    12

    Default

    There's:

    http://www.dynamicdrive.com/dynamici...drag/index.htm

    and:

    http://www.walterzorn.com/dragdrop/dragdrop_e.htm

    both of which can be configured to limit the range of motion of the dragged item(s).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    John, I read the question as "should be dragged", not "only can be dragged", so the kids should figure out where to put it-- the question then is how to tell where it is, and whether that position is "correct". How would you approach that? You'd know better than I would.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .dock {
      width:100px;height:200px;border:solid black 1px;float:left;margin-Left:10px;
    }
    
    
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Drag and Drop (19-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.38K
    
    // ****** 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;
     this.dy=dxy.indexOf('y')>-1;
     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.lastX=ev.clientX;
      this.lastY=ev.clientY;
      this.dobj.style.zIndex=zxcLTZ(this.dobj,'z-Index')+10+'';
      this.pos=[zxcLTZ(this.dobj,this.xmde),zxcLTZ(this.dobj,this.ymde)];
      this.drag=true;
      if (this.df) this.df(this,ev);
     }
     if (ev.target) ev.preventDefault();
     return false;
    }
    
    zxcDrag.prototype.move=function(ev){
     if (this.drag){
      var mx=ev.clientX,my=ev.clientY,x=this.pos[0]+(mx-this.lastX),y=this.pos[1]+(my-this.lastY);
      if (this.dx&&x>=this.mm[0]&&x<=this.mm[1]){
       this.pos[0]=x*(this.xmde=='left'?1:-1);
       this.dobj.style[this.xmde]=this.pos[0]+'px';
       this.lastX=mx;
      }
      if (this.dy&&y>=this.mm[2]&&y<=this.mm[3]){
       this.pos[1]=y*(this.ymde=='top'?1:-1);
       this.dobj.style[this.ymde]=this.pos[1]+'px';
       this.lastY=my;
      }
      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);
    }
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcDragDrop(drag,dock){
     drag=zxcByClassName(drag);
     this.drags=[];
     for (var z0=0;z0<drag.length;z0++){
      this.drags[z0]=[drag[z0].className.split(' ')[1],drag[z0]];
      this.addevt(drag[z0],'mousedown','MseDown',z0);
     }
     var dobj=drag[0].cloneNode(true);
     dobj.style.position='absolute';
     dobj.style.left='100px';
     dobj.style.top='100px';
     dobj.style.visibility='hidden';
     document.body.appendChild(dobj);
     this.dobj=new zxcDrag(dobj,null,'xy',false,this.MseUp);//,mm,uf,mf,df
     this.dobj.oop=this;
     dock=zxcByClassName(dock);
     this.docks=[];
     for (var z1=0;z1<dock.length;z1++){
      this.docks[z1]=[dock[z1].className.split(' ')[1],dock[z1]];
     }
    }
    
    zxcDragDrop.prototype.MseUp=function(dobj){
     var drag=this.dobj;
     var dragpos=zxcPos(drag);
     var dock=this.oop.dock;
     var dockpos=zxcPos(dock);
     if (dragpos[0]>dockpos[0]&&dragpos[0]<dockpos[0]+dock.offsetWidth-drag.offsetWidth&&dragpos[1]>dockpos[1]&&dragpos[1]<dockpos[1]+dock.offsetHeight-drag.offsetHeight){
      dock.appendChild(this.oop.drags[this.oop.nu][1].cloneNode(true));
     }
     drag.style.visibility='hidden';
    }
    
    zxcDragDrop.prototype.MseDown=function(e,nu){
     var pos=zxcPos(this.drags[nu][1]);
     this.dock=false;
     for (var z1=0;z1<this.docks.length;z1++){
      if (this.docks[z1][0]==this.drags[nu][0]){
       this.dock=this.docks[z1][1];
       break;
      }
     }
     if (this.dock){
      this.nu=nu;
      var dobj=this.dobj.dobj;
      dobj.style.left=pos[0]+'px';
      dobj.style.top=pos[1]+'px';
      dobj.src=this.drags[nu][1].src;
      dobj.style.visibility='visible';
      this.dobj.down(e);
     }
    }
    
    zxcDragDrop.prototype.addevt=function(o,t,f,p){
     var oop=this;
     if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
     else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     else {
      var prev=o['on'+t];
      if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
      else o['on'+t]=o[f];
     }
    }
    
    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;
    }
    
    
    function zxcPos(obj){
     var rtn=[0,0];
     while(obj){
      rtn[0]+=obj.offsetLeft;
      rtn[1]+=obj.offsetTop;
      obj=obj.offsetParent;
     }
     return rtn;
    }
    
    
    
    /*]]>*/
    </script>
    </head>
    
    <body onload="new zxcDragDrop('drag','dock')">
    <img class="drag A" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="30" height="30" />
    <img class="drag B" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="30" height="30" />
    <div class="dock A"></div>
    <div class="dock B"></div>
    
    
    
    
    </body>
    
    </html>
    if this is the sort of thing you are looking for I can explain
    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
    Mar 2005
    Location
    SE PA USA
    Posts
    29,023
    Thanks
    44
    Thanked 3,209 Times in 3,171 Posts
    Blog Entries
    12

    Default

    This also looks promising:

    http://jqueryui.com/demos/draggable/

    perhaps more so than the others I mentioned because it has callbacks (options for what to do when the item is released) and the ability to return the dragged item to its original location. If these two could be combined, you could have it that if the item wasn't dragged to the proper place, it would return to its original location. I'll look into this when I have more time.

    This is no comment on Vic's code, which I haven't looked at.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •