Back To Website Design Forum

Drag a div problem

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post May 31st, 2009, 5:51 am

I am using a js drag script on my site to make a div dragable however that div has some text boxers in it and when you click on the text boxers nothing happens (you can not type anything) this is because of the drag script. Now I am using the label tag and when you click on the text in the label you can then type in the box but you cant if you just click on the box itself any ideas.
I have tried extending the label tag around the text box but no luck! :(
^__^
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 31st, 2009, 5:51 am

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post May 31st, 2009, 6:35 am

Could you post the script so that we can have a look?
I'd love to change the world, but they won't give me the source code.
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post May 31st, 2009, 7:54 am

sure
Code: [ Select ]
 
var Drag = {
 
    obj : null,
 
    init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
    {
        o.onmousedown   = Drag.start;
 
        o.hmode         = bSwapHorzRef ? false : true ;
        o.vmode         = bSwapVertRef ? false : true ;
 
        o.root = oRoot && oRoot != null ? oRoot : o ;
 
        if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
        if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
        if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
        if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
 
        o.minX  = typeof minX != 'undefined' ? minX : null;
        o.minY  = typeof minY != 'undefined' ? minY : null;
        o.maxX  = typeof maxX != 'undefined' ? maxX : null;
        o.maxY  = typeof maxY != 'undefined' ? maxY : null;
 
        o.xMapper = fXMapper ? fXMapper : null;
        o.yMapper = fYMapper ? fYMapper : null;
 
        o.root.onDragStart  = new Function();
        o.root.onDragEnd    = new Function();
        o.root.onDrag       = new Function();
    },
 
    start : function(e)
    {
        var o = Drag.obj = this;
        e = Drag.fixE(e);
        var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
        var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
        o.root.onDragStart(x, y);
 
        o.lastMouseX    = e.clientX;
        o.lastMouseY    = e.clientY;
 
        if (o.hmode) {
            if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
            if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
        } else {
            if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
            if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
        }
 
        if (o.vmode) {
            if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
            if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
        } else {
            if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
            if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
        }
 
        document.onmousemove    = Drag.drag;
        document.onmouseup      = Drag.end;
 
        return false;
    },
 
    drag : function(e)
    {
        e = Drag.fixE(e);
        var o = Drag.obj;
 
        var ey  = e.clientY;
        var ex  = e.clientX;
        var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
        var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
        var nx, ny;
 
        if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
        if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
        if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
        if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
 
        nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
        ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
 
        if (o.xMapper)      nx = o.xMapper(y)
        else if (o.yMapper) ny = o.yMapper(x)
 
        Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
        Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
        Drag.obj.lastMouseX = ex;
        Drag.obj.lastMouseY = ey;
 
        Drag.obj.root.onDrag(nx, ny);
        return false;
    },
 
    end : function()
    {
        document.onmousemove = null;
        document.onmouseup   = null;
        Drag.obj.root.onDragEnd(    parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
                                    parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
        Drag.obj = null;
    },
 
    fixE : function(e)
    {
        if (typeof e == 'undefined') e = window.event;
        if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
        if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
        return e;
    }
};
 
  1.  
  2. var Drag = {
  3.  
  4.     obj : null,
  5.  
  6.     init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
  7.     {
  8.         o.onmousedown   = Drag.start;
  9.  
  10.         o.hmode         = bSwapHorzRef ? false : true ;
  11.         o.vmode         = bSwapVertRef ? false : true ;
  12.  
  13.         o.root = oRoot && oRoot != null ? oRoot : o ;
  14.  
  15.         if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
  16.         if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
  17.         if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
  18.         if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
  19.  
  20.         o.minX  = typeof minX != 'undefined' ? minX : null;
  21.         o.minY  = typeof minY != 'undefined' ? minY : null;
  22.         o.maxX  = typeof maxX != 'undefined' ? maxX : null;
  23.         o.maxY  = typeof maxY != 'undefined' ? maxY : null;
  24.  
  25.         o.xMapper = fXMapper ? fXMapper : null;
  26.         o.yMapper = fYMapper ? fYMapper : null;
  27.  
  28.         o.root.onDragStart  = new Function();
  29.         o.root.onDragEnd    = new Function();
  30.         o.root.onDrag       = new Function();
  31.     },
  32.  
  33.     start : function(e)
  34.     {
  35.         var o = Drag.obj = this;
  36.         e = Drag.fixE(e);
  37.         var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
  38.         var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
  39.         o.root.onDragStart(x, y);
  40.  
  41.         o.lastMouseX    = e.clientX;
  42.         o.lastMouseY    = e.clientY;
  43.  
  44.         if (o.hmode) {
  45.             if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
  46.             if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
  47.         } else {
  48.             if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
  49.             if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
  50.         }
  51.  
  52.         if (o.vmode) {
  53.             if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
  54.             if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
  55.         } else {
  56.             if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
  57.             if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
  58.         }
  59.  
  60.         document.onmousemove    = Drag.drag;
  61.         document.onmouseup      = Drag.end;
  62.  
  63.         return false;
  64.     },
  65.  
  66.     drag : function(e)
  67.     {
  68.         e = Drag.fixE(e);
  69.         var o = Drag.obj;
  70.  
  71.         var ey  = e.clientY;
  72.         var ex  = e.clientX;
  73.         var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
  74.         var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
  75.         var nx, ny;
  76.  
  77.         if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
  78.         if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
  79.         if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
  80.         if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
  81.  
  82.         nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
  83.         ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
  84.  
  85.         if (o.xMapper)      nx = o.xMapper(y)
  86.         else if (o.yMapper) ny = o.yMapper(x)
  87.  
  88.         Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
  89.         Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
  90.         Drag.obj.lastMouseX = ex;
  91.         Drag.obj.lastMouseY = ey;
  92.  
  93.         Drag.obj.root.onDrag(nx, ny);
  94.         return false;
  95.     },
  96.  
  97.     end : function()
  98.     {
  99.         document.onmousemove = null;
  100.         document.onmouseup   = null;
  101.         Drag.obj.root.onDragEnd(    parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
  102.                                     parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
  103.         Drag.obj = null;
  104.     },
  105.  
  106.     fixE : function(e)
  107.     {
  108.         if (typeof e == 'undefined') e = window.event;
  109.         if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
  110.         if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
  111.         return e;
  112.     }
  113. };
  114.  
^__^
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post May 31st, 2009, 7:57 am

Great, thanks, now would you happen to have a site up where we could have a look at what it's currently doing (i.e. the undesirable effect)?
I'd love to change the world, but they won't give me the source code.
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post June 5th, 2009, 7:22 am

I have worked it out, all you need to do is an and this

Code: [ Select ]
<input type="text" name="user" id="user" size="16" onclick="document.getElementById('user').focus()" />
^__^

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 121 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.