JSネイティブドラッグマウスの左と右のスライドのdiv

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>タイトル</ タイトル> 
< スクリプトタイプ= "テキスト/ javascriptの" SRC = "/ jqueryの-1.11.0 .min.js」> </ スクリプト> 

    < スタイル> 
        本体{ 
            位置：相対。
            マージン：0 ;0 ; 
            幅：100％; 
            高さ：1000px ; 
        } 
        #box { 
            高さ：500pxなど。
            幅：100％; 
            背景：#CDCDCD 。
        } 
        ＃小箱{ 
            高さ：500pxなど。
            幅：500pxなど。
            位置：絶対; 
            左：0 ;
            トップ：0 ; 
            背景：＃FF66CC 。
            カーソル：移動。
            不透明度：0.7 ; 
        } 
    </ スタイル> 
</ ヘッド> 
< 身体> 
    < div要素のid = "ボックス" > 
        < div要素のid = "小箱" > </ DIV > 
    </ DIV > 
< スクリプト> 
    のvar ボックス= $（"" ）;
     Varの本体= $（' ボディ' ）;
     VARのインデックス= 0 ;
     VARのX1、
    box.mousedown（関数（）{ 
        インデックス= 1 ;               // れるonmousemoveトリガにマウスダウン法
        VAR X = event.clientX;      / / マウスクリックは、X、座標値
        varが左=  この.style.left; 
        左= left.substr（0 、left.length - 2 ）;    //去掉PX 
        X1 = のparseInt（X - 左）。
    }）; 
    box.mousemove（関数（）{
         場合（インデックス=== 1 ）{
             この.style.left = event.clientX - X1 + ' ピクセル' ;
             場合（この.style.left.substr（0 、この.style.left .LENGTH - 2 ）< 0 ）{
                 この.style.left = 0 。 
            }。
            もし（この.style.left.substr（0 、この.style.left.length - 2 ）> 500 ）{
                 この.style.left = ' 500pxなど' 。
            }。// 最大滑动距离
        } 
    }）。
    box.mouseup（関数（）{ 
        インデックス= 0 ; 
    }）; 
    body.mouseup（関数（）{ 
        インデックス= 0 ; 
    }）; 
</ スクリプト> 
</ボディ> 
</ HTML >