拖拉到中間的div層可以拖動，拖動不能超過中間div的邊框：

jsPlumb.draggable(id);
$("#" + id).draggable({ containment: "parent" });

jsPlumb.draggable(jsPlumb.getSelector(".window"), { containment:".demo"});

使用jquery裏的draggable爲其標記。並指定可以拖拽的範圍（侷限於我們的content容器）。如果想限制元素拖拽的範圍，只需要設置它的containment屬性。

   $(".jq-draggable-incontainer").draggable({
                containment: $( "#content" ).length ? "#content" : "document"
                });

html 代碼：

<!doctype html>
<html>
    <head>

        <title>jsPlumb 1.5.2 demo - jQuery</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  
  <link rel="stylesheet" href="demo.css">
    </head>
    <body>
   <div id="main">
   <div id="render"></div>
            <div class="component window" id="window1"><strong>Window 1</strong></div>
            <div class="component window" id="window2"><strong>Window 2</strong></div>
            <div class="component window" id="window3"><strong>Window 3</strong></div>
            <div class="component window" id="window4"><strong>Window 4</strong></div>
            <div class="component window" id="window5"><strong>Window 5</strong></div>
            <div class="component window" id="window6"><strong>Window 6</strong></div>
            <div class="component window" id="window7"><strong>Window 7</strong></div>
        </div>
</body>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery-1.9.0-min.js'></script>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery-ui-1.9.2-min.js'></script>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery.ui.touch-punch.min.js'></script>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery.jsPlumb-1.5.2.js'></script>


<script src="demo.js"></script>
</html>

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

css樣式：

#window1 { top:5em;left:4em;}
#window2 { top:17em; left:49em;}
#window3 { top:31em;left:4em; }
#window4 { top:9em; left:28em;}
#window5 {top:45em;left:33em;}
#window6 {top:30em;left:64em;}
#window7 {top:52em;left:6em;}
#window8 {left:66em;top:32em;}
body {
    padding:0;
    margin:0;
    background-color:white;
    font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color:#eaedef;

}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
  src:local('Open Sans'),
   local('OpenSans'),
   url("OpenSans-Regular.ttf") format('truetype'),
   url("OpenSans.woff") format('woff');
}

#main {
margin-top:44px;
position: relative;
font-size: 80%;
}

#render {
background-color:#fff;
}
.window{

    text-align:center;
    z-index:24;
cursor:pointer;
box-shadow: 2px 2px 19px #aaa;
   -o-box-shadow: 2px 2px 19px #aaa;
   -webkit-box-shadow: 2px 2px 19px #aaa;
   -moz-box-shadow: 2px 2px 19px #aaa;

}
.component {
border:1px solid #346789;
border-radius:0.5em;
opacity:0.8;
filter:alpha(opacity=80);
background-color:white;
color:black;
padding:0.5em;
font-size:0.8em;
}

.component:hover {
    border:1px solid #123456;
    box-shadow: 2px 2px 19px #444;
   -o-box-shadow: 2px 2px 19px #444;
   -webkit-box-shadow: 2px 2px 19px #444;
   -moz-box-shadow: 2px 2px 19px #fff;
    opacity:0.9;
    filter:alpha(opacity=90);
}

.window {
    background-color:white;
    border:1px solid #346789;
    box-shadow: 2px 2px 19px #e0e0e0;
    -o-box-shadow: 2px 2px 19px #e0e0e0;
    -webkit-box-shadow: 2px 2px 19px #e0e0e0;
    -moz-box-shadow: 2px 2px 19px #e0e0e0;
    -moz-border-radius:0.5em;
    border-radius:0.5em;
    width:5em; height:5em;
    position:absolute;
    color:black;
    padding:0.5em;
    width:8em;
    height:8em;
    line-height: 8em;
    font-size:0.8em;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;
}

.window:hover {
    border:1px solid #123456;
    box-shadow: 2px 2px 19px #444;
   -o-box-shadow: 2px 2px 19px #444;
   -webkit-box-shadow: 2px 2px 19px #444;
   -moz-box-shadow: 2px 2px 19px #fff;
    opacity:0.9;
    filter:alpha(opacity=90);
}

.window a {
    font-family:helvetica;
}
._jsPlumb_drag_select * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none
}
/** Z-INDEX **/

._jsPlumb_connector { z-index:18; }
._jsPlumb_endpoint { z-index:19; }
._jsPlumb_overlay { z-index:20; }
._jsPlumb_connector._jsPlumb_hover {
    z-index:21 !important;
}
._jsPlumb_endpoint._jsPlumb_hover {
    z-index:22 !important;
}
._jsPlumb_overlay._jsPlumb_hover {
    z-index:23 !important;
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

js代碼：

jsPlumb.bind("ready", function() {

window.jsPlumbDemo = {

  init : function() {

   jsPlumb.importDefaults({
    DragOptions : { cursor: "pointer", zIndex:2000 },
    HoverClass:"connector-hover"
   });

   var connectorStrokeColor = "rgba(50, 50, 200, 1)",
    connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
    hoverPaintStyle = { strokeStyle:"#7ec3d9" };   // hover paint style is merged on normal style, so you
                                                           // don't necessarily need to specify a lineWidth

   //
   // connect window1 to window2 with a 13 px wide olive colored Bezier, from the BottomCenter of
   // window1 to 3/4 of the way along the top edge of window2. give the connection a 1px black outline,
   // and allow the endpoint styles to derive their color and outline from the connection.
   // label it "Connection One" with a label at 0.7 of the length of the connection, and put an arrow that has a 50px
   // wide tail at a point 0.2 of the length of the connection. we use 'cssClass' and 'endpointClass' to assign
   // our own css classes, and the Label overlay has three css classes specified for it too. we also give this
   // connection a 'hoverPaintStyle', which defines the appearance when the mouse is hovering over it.
   //
   var connection1 = jsPlumb.connect({
    //開始點
    source:"window1",
    //目的點
      target:"window2",
    //連接器採用Bezier曲線，還有直線和流程圖連線
    connector:["Bezier", { curviness:70 }],
    //樣式
      cssClass:"c1",
    //端點類型，點對點（Dot Endpoint ）,矩形端點(Rectangle Endpoint).圖片端點(Image Endpoint)
    //blank端點類型爲空
      endpoint:"Blank",
      endpointClass:"c1Endpoint",
    //anchors錨（動態錨，靜態錨）,[x,y,dx,dy];x,y的區間爲[0,1]意思爲錨的位置;dx,dy的區間爲[-1,1]意思爲曲線的方向
      anchors:["BottomCenter", [ 0.75, 0, 0, -1 ]],
    //連接線的樣式
      paintStyle:{
     //連接線的寬度，int值
     lineWidth:6,
     //連接器的顏色
     strokeStyle:"#a7b04b",
     //連接器或端點的輪廓寬度
     outlineWidth:1,
     //連接器或端點的顏色
     outlineColor:"#666"
    },
    //fillStyle:定義Endpoint的顏色
    endpointStyle:{ fillStyle:"#a7b04b" },
    //連接線懸浮樣式
      hoverPaintStyle:hoverPaintStyle,
    //覆蓋物類型，四個值Arrow可配置的箭頭（可折回），Label點的連接器上可配置的標籤，PlainArrow一個三角形的箭頭，不可折回，Diamond鑽石
      overlays : [
     //連接器上配置的label
     ["Label", {
      cssClass:"l1 component label",
      //顯示的label
      label : "Connection One",
      //連接器的位置
      location:0.7,
      id:"label",
      //點擊事件
      events:{
       "click":function(label, evt) {
        alert("clicked on label for connection " + label.component.id);
       }
      }
     }],
     //連接器上配置的箭頭
     ["Arrow", {
      cssClass:"l1arrow",
      location:0.5, width:20,length:20,
      //點擊事件
      events:{
       "click":function(arrow, evt) {
        alert("clicked on arrow for connection " + arrow.component.id);
       }
      }
     }]
    ]
   });


         var w23Stroke = "rgb(189,11,11)";
         var connection3 = jsPlumb.connect({
    source:"window2",
    target:"window3",
    //連接線的樣式
    paintStyle:{
    //連接線的寬度，int值
     lineWidth:8,
     //連接器的顏色
     strokeStyle:w23Stroke,
     outlineColor:"#666",
     outlineWidth:1
    },
    detachable:false,
    //連接線懸浮樣式
    hoverPaintStyle:hoverPaintStyle,
    //錨
    anchors:[ [ 0.3 , 1, 0, 1 ], "TopCenter" ],
    //端點類型
    endpoint:"Rectangle",
    endpointStyles:[
     //gradient漸變，Linear線條漸變和radial半徑漸變兩種
     { gradient : { stops:[[0, w23Stroke], [1, "#558822"]] }},
     { gradient : {stops:[[0, w23Stroke], [1, "#882255"]] }}
    ]
   });

   var connection2 = jsPlumb.connect({
    source:'window3', target:'window4',
    //連接線的樣式
    paintStyle:{
       lineWidth:10,
       //連接器顏色
       strokeStyle:connectorStrokeColor,
       outlineColor:"#666",
       outlineWidth:1
    },
    //鼠標懸浮連接器樣式
    hoverPaintStyle:hoverPaintStyle,
    //錨
    anchor:"AutoDefault",
    detachable:false,
    //端點樣式
    endpointStyle:{
        gradient : {
         stops:[[0, connectorStrokeColor], [1, connectorHighlightStrokeColor]],
         offset:17.5,
         innerRadius:15
        },
        //端點半徑
        radius:35
    },
    //覆蓋物label顯示時間
    label : function(connection) {
     var d = new Date();
     var fmt = function(n, m) { m = m || 10; return (n < m ? new Array(("" + m).length - (""+n).length + 1).join("0") : "") + n; };
     return (fmt(d.getHours()) + ":" + fmt(d.getMinutes()) + ":" + fmt(d.getSeconds())+ "." + fmt(d.getMilliseconds(), 100));
    },
    labelStyle:{
     cssClass:"component label"
    }
     });

            //
            //this connects window5 with window6 using a Flowchart connector that is painted green,
            //with large Dot endpoints that are placed in the center of each element. there is a
            //label at the default location of 0.5, and the connection is marked as not being
            //detachable.
   //
         var conn4Color = "rgba(46,164,26,0.8)";
         var connection4 = jsPlumb.connect({
    source:'window5',
    target:'window6',
    //連接器採用流程圖連線，cornerRadius流程圖線在折線處爲圓角
    connector:[ "Flowchart", { cornerRadius:10 } ],
    //錨，連接器在兩個window連接的位置
    anchors:["Center", "Center"],
    //連接線樣式
    paintStyle:{
     lineWidth:9,
     strokeStyle:conn4Color,
     outlineColor:"#666",
     outlineWidth:2,
     joinstyle:"round"
    },
    //鼠標懸浮連接線樣式
    hoverPaintStyle:hoverPaintStyle,
    detachable:false,
    endpointsOnTop:false,
    //端點樣式
    endpointStyle:{ radius:65, fillStyle:conn4Color },
    labelStyle : { cssClass:"component label" },
    label : "big\nendpoints"
      });

         var connection5 = jsPlumb.connect({
    source:"window4",
    target:"window5",
    //錨點位置
    anchors:["BottomRight", "TopLeft"],
    //連接線樣式
    paintStyle:{
     lineWidth:7,
     //連接器顏色
     strokeStyle:"rgb(131,8,135)",
//          outlineColor:"#666",
//           outlineWidth:1,
     //閃爍的線
     dashstyle:"4 2",
     joinstyle:"miter"
    },
    //鼠標懸浮樣式
    hoverPaintStyle:hoverPaintStyle,
    //端點類型爲圖片
    endpoint:["Image", {url:"endpointTest1.png"}],
    //連接器直線
    connector:"Straight",
    endpointsOnTop:true,
    //覆蓋物
    overlays:[ ["Label", {
        cssClass:"component label",
        label : "4 - 5",
        location:0.3
       }],
       //箭頭
       "Arrow"

    ]
   });

   var stateMachineConnector = {
    //連接器
    connector:"StateMachine",
    //連接器樣式
    paintStyle:{lineWidth:3,strokeStyle:"#056"},
    //鼠標懸浮樣式
    hoverPaintStyle:{strokeStyle:"#dbe300"},
    //端點爲空
    endpoint:"Blank",
    //錨位置
    anchor:"Continuous",
    //覆蓋物，三件箭頭不可折回
    overlays:[ ["PlainArrow", {location:1, width:15, length:12} ]]
   };

   jsPlumb.connect({
    source:"window3",
    target:"window7"
   }, stateMachineConnector);

   jsPlumb.connect({
    source:"window7",
    target:"window3"
   }, stateMachineConnector);

   // jsplumb event handlers

   // double click on any connection
   jsPlumb.bind("dblclick", function(connection, originalEvent) { alert("double click on connection from " + connection.sourceId + " to " + connection.targetId); });
   // single click on any endpoint
   jsPlumb.bind("endpointClick", function(endpoint, originalEvent) { alert("click on endpoint on element " + endpoint.elementId); });
   // context menu (right click) on any component.
   jsPlumb.bind("contextmenu", function(component, originalEvent) {
                alert("context menu on component " + component.id);
                originalEvent.preventDefault();
                return false;
            });

   // make all .window divs draggable. note that here i am just using a convenience method - getSelector -
   // that enables me to reuse this code across all three libraries. In your own usage of jsPlumb you can use
   // your library's selector method - "$" for jQuery, "$$" for MooTools, "Y.all" for YUI3.
   jsPlumb.draggable(jsPlumb.getSelector(".window"), { containment:".demo"});

   jsPlumb.bind("click", function(c) {
    var p = $(c.canvas).find("path"),
     l = p[0].getTotalLength(),
     i = l, d = -10, s = 150,
     att = function(a, v) {
      for (var i = 0; i < p.length; i++)
       p[i].setAttribute(a, v);
     },
     tick = function() {
      if (i > 0) {
       i += d;
       att("stroke-dashoffset", i);
       window.setTimeout(tick, s);
      }
     };
    att("stroke-dasharray", l + " " + l);
    tick();

});

}
};

// render mode
var resetRenderMode = function(desiredMode) {
  var newMode = jsPlumb.setRenderMode(desiredMode);

  jsPlumbDemo.init();
};
resetRenderMode(jsPlumb.SVG);

});

-----------------------------------------------------------------------------------------------------------

所需三個js文件：

效果圖

代碼：

[javascript]view
plaincopy

<!DOCTYPE html>  

<html>  

<head>  

    <script src="jsPlumb_files/jquery-1.9.0.js"></script>  

    <script src="jsPlumb_files/jquery-ui-1.9.2-min.js"></script>  

    <script src="jsPlumb_files/jquery.jsPlumb-1.4.0-all.js"></script>  

    <title>jsPlumb_demo</title>  

    <meta charset="UTF-8">  

    <style type="text/css">  

        /**當拖動一個連接點時，可連接的連接點會自動使用該css**/  

        .dragActive {  

            border: 2px dotted orange;  

        }  

        /**當拖動一個連接點到可連接的點時，該點會自動使用該css**/  

        .dropHover {  

            border: 1px dotted red;  

        }  

        .item {  

            border: 1px solid black;  

            background-color: #ddddff;  

            width: 100px;  

            height: 100px;  

            position: absolute;  

        }  

        #state1 {  

            left: 100px;  

            top: 100px;  

        }  

        #state2 {  

            left: 350px;  

            top: 150px;  

        }  

        #state3 {  

            left: 100px;  

            top: 350px;  

        }  

        #state4 {  

            left: 300px;  

            top: 350px;  

        }  

    </style>  

    <script>  

        //初始化  

        jsPlumb.ready(function () {  

            //首先，我們給jsPlumb設一些默認值，然後聲明一個exampleDropOptions變量。  

            jsPlumb.importDefaults({  

                DragOptions: { cursor: 'pointer'},  //拖動時鼠標停留在該元素上顯示指針，通過css控制  

                PaintStyle: { strokeStyle: '#666' },//元素的默認顏色  

                EndpointStyle: { width: 20, height: 16, strokeStyle: '#567567' },//連接點的默認顏色  

                Endpoint: [ "Dot", { radius: 5 } ],//連接點的默認形狀  

                Connector: [ "Bezier", { curviness: 150 } ],  

                Anchors: [ "TopCenter", "BottomCenter" ],//連接點的默認位置  

                ConnectionOverlays: [//連接覆蓋圖  

                    ["Arrow", {  

                        location: 1,  

                        id: "arrow",  

                        length: 14,  

                        foldback: 1  

                    }],  

                    ["Label", {  

                        location: 0.5,  

                        id: "label",  

                        cssClass: "aLabel"  

                    }]  

                ]  

            });  

            var exampleDropOptions = {  

                hoverClass: "dropHover",//釋放時指定鼠標停留在該元素上使用的css class  

                activeClass: "dragActive"//可拖動到的元素使用的css class  

            };  

            // 綁定到連接/ connectionDetached事件,和更新的列表在屏幕上的連接。  

            jsPlumb.bind("connection", function (info, originalEvent) {  

                updateConnections(info.connection);  

            });  

            jsPlumb.bind("connectionDetached", function (info, originalEvent) {  

                updateConnections(info.connection, true);  

            });  

            function updateConnections(info) {  

                alert("連接線ID:" + info.id + "\n連接線sourceID:" + info.sourceId + "\n連接線targetID:" + info.targetId);  

             alert(info.endpoints[0].getUuid().substr(info.endpoints[0].getUuid().indexOf('-') + 1));  

            }  

            //添加jsPlumb連接點  

            var color1 = "#316b31";  

            var exampleEndpoint1 = {  

                endpoint: ["Dot", { radius: 5 }],//設置連接點的形狀爲圓形  

                paintStyle: { fillStyle: color1 },//設置連接點的顏色  

                isSource: true, //是否可以拖動（作爲連線起點）  

                scope: "green dot",//連接點的標識符，只有標識符相同的連接點才能連接  

                connectorStyle: { strokeStyle: color1, lineWidth: 6 },//連線顏色、粗細  

                connector: ["Bezier", { curviness: 10 } ],//設置連線爲貝塞爾曲線  

                maxConnections: 1,//設置連接點最多可以連接幾條線  

                isTarget: true, //是否可以放置（作爲連線終點）  

                dropOptions: exampleDropOptions//設置放置相關的css  

            };  

            var color2 = "rgba(229,219,61,0.5)";  

            var exampleEndpoint2 = {  

                endpoint: "Rectangle",  //設置連接點的形狀爲矩形  

                paintStyle: {//設置連接點的大小、顏色、透明度  

                    width: 25,  

                    height: 21,  

                    fillStyle: "red",  

                    opacity: 0.5  

                },  

                anchor: "BottomLeft",   //設置連接點的位置，左下角  

                isSource: true, //是否可以拖動（作爲連線起點）  

                scope: 'yellow dot',    //連接點的標識符，只有標識符相同的連接點才能連接  

                connectorStyle: { strokeStyle: color2, lineWidth: 4},//連線顏色、粗細  

                //connector: "Straight",    //設置連線爲直線  

                connector: "Flowchart",//設置爲流程圖線  

                isTarget: true,//是否可以放置（作爲連線終點）  

                maxConnections: 3,//設置連接點最多可以連接幾條線  [-1爲無限制]  

                dropOptions: exampleDropOptions,//設置放置相關的css  

                beforeDetach: function (conn) { //綁定一個函數，在連線前彈出確認框  

                    return confirm("斷開連接?");  

                },  

                onMaxConnections: function (info) {//綁定一個函數，當到達最大連接個數時彈出提示框  

                    alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);  

                }  

            };  

            var exampleEndpoint3 = {  

                endpoint: "Rectangle",  //設置連接點的形狀爲矩形  

                paintStyle: {//設置連接點的大小、顏色、透明度  

                    width: 25,  

                    height: 21,  

                    fillStyle: "blue",  

                    opacity: 0.5  

                },  

                anchor: "BottomLeft",   //設置連接點的位置，左下角  

                isSource: true, //是否可以拖動（作爲連線起點）  

                scope: 'blue dot',  //連接點的標識符，只有標識符相同的連接點才能連接  

                connectorStyle: { strokeStyle: color2, lineWidth: 4},//連線顏色、粗細  

                //connector: "Straight",    //設置連線爲直線  

                connector: "Flowchart",//設置爲流程圖線  

                isTarget: true,//是否可以放置（作爲連線終點）  

                maxConnections: -1,//設置連接點最多可以連接幾條線  [-1爲無限制]  

                dropOptions: exampleDropOptions,//設置放置相關的css  

                beforeDetach: function (conn) { //綁定一個函數，在連線前彈出確認框  

                    return confirm("斷開連接?");  

                },  

                onMaxConnections: function (info) {//綁定一個函數，當到達最大連接個數時彈出提示框  

                    alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);  

                }  

            };  

            //將連接點綁定到html元素上  

            var anchors = [  

                        [1, 0.2, 1, 0],  

                        [0.8, 1, 0, 1],  

                        [0, 0.8, -1, 0],  

                        [0.2, 0, 0, -1]  

                    ],  

                    maxConnectionsCallback = function (info) {  

                        alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);  

                    };  

            var e1 = jsPlumb.addEndpoint("state2", { anchor: "LeftMiddle" }, exampleEndpoint1);//將exampleEndpoint1類型的點綁定到id爲state2的元素上  

            e1.bind("maxConnections", maxConnectionsCallback);//也可以在加到元素上之後綁定函數  

            jsPlumb.addEndpoint("state1", exampleEndpoint1);//將exampleEndpoint1類型的點綁定到id爲state1的元素上  

            jsPlumb.addEndpoint("state3", exampleEndpoint2);//將exampleEndpoint2類型的點綁定到id爲state3的元素上  

            jsPlumb.addEndpoint("state1", {anchor: anchors}, exampleEndpoint2);//將exampleEndpoint2類型的點綁定到id爲state1的元素上，指定活動連接點  

            jsPlumb.addEndpoint("state3", {anchor: anchors}, exampleEndpoint3);//將exampleEndpoint2類型的點綁定到id爲state1的元素上，指定活動連接點  

            jsPlumb.addEndpoint("state4", {anchor: anchors}, exampleEndpoint3);//將exampleEndpoint2類型的點綁定到id爲state1的元素上，指定活動連接點  

            //設置連接線  

            jsPlumb.connect({  

                source: "state3",  

                target: "state2"  

            });  

        });  

    </script>  

</head>  

<body>  

//html部分僅聲明三個div，注意，jsPlumb通過id來識別html元素，因此如果要使用jsPlumb連線必須聲明id。  

<div id="state1" class="item">state1</div>  

<div id="state2" class="item">state2</div>  

<div id="state3" class="item">state3</div>  

<div id="state4" class="item">state4</div>  

</body>  

</html>

jsPlumb Demo源碼分析

所需三個js文件：

效果圖

代碼：

PDManer [元數建模]-v4.9.0 發佈：一款簡單好用的數據庫建模平臺

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

sql求連續值問題

cs01 CSS Syntax

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

[MASM拾遺]Offset僞指令

h30 HTML Layout Elements

瞭解顯卡

一款基於C#開發的通訊調試工具（支持Modbus RTU、MQTT調試）

Linux/Golang/glibC系統調用

js獲取滾動條距離瀏覽器頂部,底部的高度,兼容ie和firefox

刪除前彈出確認對話框的js代碼

JSP實現網頁，數據庫分頁功能

java實現xml文件增刪改查

JS實現網絡拓撲圖

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結