JS implementation of the split bar

JS to achieve segmentation effect, in order to familiarize themselves with JS writing, pure JavaScript scripting

Briefly introduce several functions:

The role of the SetCapture () function is to send the subsequent mouse events to this object,

ReleaseCapture () is to return the mouse event

Handled by itself, such as document, window, object, which ensures that the drag process is not interfered by other elements. In addition, there is a very important thing is that on the Win32, the mouse move event is not a continuous, that is, not every time we moved 1px mouse pointer, there will be a mousemove,windows periodic check mouse Changes in position to produce MouseMove events. So, if it is a very small page object, such as a 5px diameter dot, if there is no setcapture and releasecapture, then after the mouse hold, the rapid movement of the mouse, it is possible to move the mouse, but the dot is still in place, This is because the next MouseMove event is no longer being sent to the dot object.

var Siblingelem = function (elem)
{
var _nodes = [];

while ((Elem = elem.previoussibling))
{
if (Elem.nodetype = = 1)
{_nodes.push (elem); Brea K }
return
_nodes[0];
}
var Nextelem = function (elem)
{
var _nodes = [];
while ((Elem = elem.nextsibling))
{
if (Elem.nodetype = = 1)
{_nodes.push (elem); ; }
return
_nodes[0];
}

Get two or so two elements adjacent to each other

In order to facilitate the use of writing a JS object

Main method: Calculate the width of the left and right containers according to the coordinates of the mouse movement

move = function (event, f)     {        if (f.flag)     ;     {            if (F.ipner2with- Event.clientx-f.ele.offsetwidth > 0)             {                 F.objleft.style.left = (
Event.clientx + f.ele.offsetwidth) + "px";                
F.objright.style.width = (f.ipner2with-event.clientx-f.ele.offsetwidth) + "px";                

F.objleft.style.width = Event.clientx + "px";            }              if (!f.ele.releasecapture)    &Nbsp;        {          
      Event.preventdefault ();
           }        }    }

/**************************************** @Name: lr_spliter implementation of table and Div split bar effect @Author: Hu Zeyun @Date: 2014-08-27 @
E-mail: hzeyun@sina.com @qq: 984559465 @ Description: Instantiating new  lr_spliter ("Control ID")         *

var Siblingelem = function (elem) {    var _nodes = [];     while ((Elem = elem.previoussibling))     {         if (Elem.nodetype = 1)         {_nodes.push (elem); break;}   & nbsp
}     return _nodes[0]; var Nextelem = function (elem) {    var _nodes = [];     while (elem = elem.nextsibling) )     {        if (Elem.nodetype = 1)     
    {_nodes.push (elem); break;}    }     return _nodes[0]; } Zy_spliter = function (id) {    this.flag = false;     This.objsplitter = false;

    this.ipner2with = 0;
   //Get the object's left and right container     This.ele = document.getElementById (ID);
    this.objleft = Siblingelem (This.ele);
    this.objright = Nextelem (This.ele);     this.ele.style.cursor = "W-resize"; Sets the mouse style     up = function (event, T)     {        if ( T.flag)         {             if (t.ele.releasecapture)             {  
              t.ele.releasecapture ();            }              Else             {&NBsp;              
Document.removeeventlistener ("MouseUp", T.up, True);                
Document.removeeventlistener ("MouseMove", T.move, True);                 Event.preventdefault
();            }        
     T.flag = false;
       }    };     down = function (event, f)     {        if (!f.fla g)         {             if (f.ele.setcapture)               
  F.ele.setcapture ();             Else              {              
  Document.addeventlistener ("MouseUp", up, true);                
Document.addeventlistener ("MouseMove", move, true);                 Event.preventdefault
();            }        

     F.flag = true;             if (f.ele.parentnode.tagname = "TD")              {                 F.ipner2with = F.ele.parentnode.parentnode.offsetwiDth            }              Else             {                 F.ipner2with =
F.ele.parentnode.offsetwidth;
           }        }
   };     move = function (event, f)     {        if (f.flag )         {            if (F.ipner2with-event.clientx-f.ele.offsetwidth > 0)              {                F.objleft.style.left = (Event.clientx + f.ele.offsetwidTH) + "px";                
F.objright.style.width = (f.ipner2with-event.clientx-f.ele.offsetwidth) + "px";                
F.objleft.style.width = Event.clientx + "px";            }              if (!f.ele.releasecapture)              {               
Event.preventdefault ();
           }        }
   }     var t = this;     This.ele.onmousedown = function ()     {       
Down (event, T);    }     this.ele.onmouseup = function ()     {        up (
event, T);    }     this.ele.onmousemove = function ()     {   
     Move (event, T);
   }     return this; } All code

Implementation effect: The first right and left side of the container is Div, the second is the effect of dividing table cells

Foreground HTML

Asdsdf

Adsfadsfjkl

table

<TD style= "" ><TD id= "SP2" style= "WIDTH:4PX; height:100%; "><TD style= "" >