完成 目录框的拖拉效果

Author: frank-lam

markdown-toc-code/css/content.css

@@ -20,57 +20,34 @@
 
 /* 目录栏的样式 */
 .div_toc{
-	width: 90%;
+	width: -webkit-calc(100% - 10px);
+	height: 100%;
 	float: left;
-	/*  */
-	/* 
 	padding: 20px;
-	border-radius: 3px;
-	width: 400px;
-	height: 85%;
-	min-height: 200px;
-	z-index: 999;
-	left: 10px;
-	top: 70px;
-	bottom: 20px;
-	overflow-x: hidden;
 	overflow: auto;
+	overflow-x: hidden;
 	background-color: #fafbfc;
 	border: 1px solid #d1d5da;
-	float: right; */
-	/* width: 400px;
-	min-height: 200px;
-	z-index: 999;
-	background-color: #fafbfc;
-	border: 1px solid #d1d5da;
-	overflow-x: hidden;
-	left: 10px;
-	top: 70px;
-	border-radius: 3px;
-	overflow: auto;
-	height: 85%;
-	bottom: 100px;
-	float: left; */
-	/* cursor: e-resize; */
+
 }
 
 .div_right_bar{
-	width:10px; background: red; cursor: e-resize; float: left;
+	width: 10px; 
+	height: 100%;
+	background-color: white; 
+	cursor: e-resize; 
+	float: left;
 }
 
 .toc{
 	position: fixed;
 	width: 400px;
 	min-height: 200px;
 	z-index: 999;
-	background-color: #fafbfc;
-	border: 1px solid #d1d5da;
-	padding: 20px;
-	overflow-x: hidden;
+
 	left: 10px;
 	top: 70px;
 	border-radius: 3px;
-	overflow: auto;
 	height: 85%;
 	bottom: 100px;
 	float: left;

markdown-toc-code/js/content-script.js

@@ -39,7 +39,7 @@ function init(list) {
     var div_right_bar = document.createElement("div");  // 这是一个 拖动bar
     div_right_bar.setAttribute('id', "div_right_bar");
     div_right_bar.setAttribute("class", "div_right_bar"); 
-    div_right_bar.textContent = "bar";
+    div_right_bar.textContent = "";
 
 
 
@@ -86,18 +86,16 @@ function init(list) {
     return toc;
 }
 
+
 // 这里是绑定resize事件的方法
 function bindResize(el) {
     //初始化参数
     var els = document.getElementById('toc').style;
-    
     //鼠标的 X 和 Y 轴坐标
     x = 0;
-
      //邪恶的食指
     el.onmousedown = function(e){
         //按下元素后，计算当前鼠标与对象计算后的坐标
-
         x = e.clientX - el.offsetWidth,
         y = e.clientY - el.offsetHeight;
         console.log(x);
@@ -125,6 +123,10 @@ function bindResize(el) {
     function mouseMove(e) {
         //宇宙超级无敌运算中...
         els.width = e.clientX - x + 'px';
+        els.width = e.clientX - 10 + 'px';
+        console.log("clientX:"+e.clientX);
+        console.log("x:"+x);
+        
     }
     //停止事件
     function mouseUp() {
@@ -138,10 +140,7 @@ function bindResize(el) {
                 function(){
                     document.removeEventListener("mousemove", mouseMove);
                     document.removeEventListener("mouseup", mouseUp);
-                }()
-                //卸载事件
-                // 这里也需要改写，你帮我看下啊。这样对吗？1
-               
+                }()               
             );
     }
 }