Drag a div problem

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Could you post the script so that we can have a look?
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

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
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

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)?
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

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()" />

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 50 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.