drag and Drop is Working (as far as I can tell)

public/js/app.js

@@ -5,6 +5,10 @@ $(function(){
 	myRouter = new AppRouter; 
 	Backbone.history.start();
 	//this calls initialize twice. 
+
+	setTimeout(function(){
+		$(".toggleSidebar").click();
+	}, 2); 
 });
 
 

public/js/listeners/dragDropListeners.js

@@ -17,6 +17,12 @@ tempEvents = [];
 tempEntries = []; 
 selectedLI = $($(".node")[0]); //random initialization
 clicking=false;
+dragging=false; 
+dragState = {}; 
+dragState.thisModel = null; 
+dragState.thisLI = null; 
+dragState.dragIndex = null; 
+
 
 
 $('body').on("mousedown", ".handle", function(e){
@@ -25,6 +31,12 @@ $('body').on("mousedown", ".handle", function(e){
     e.preventDefault(); 
     $('.clickStatus').text('mousedown');
 
+    dragState.thisLI = $(e.target).parent(); 
+    var thisId = dragState.thisLI.attr('data-id');  
+    dragState.thisModel = nodesCollection.findWhere({_id: thisId}); 
+    dragState.dragIndex = dragState.thisLI.index();
+    dragState.oldParModel = nodesCollection.findWhere({_id: dragState.thisLI.parent().attr("data-id") }); 
+
 
     var firstLI = $(".root").children(":first-child"); 
 	var firstEntry = [0, firstLI, "above"]; 
@@ -74,7 +86,7 @@ $('body').on("mousedown", ".handle", function(e){
     	}
     	// var height = li.getBoundingClientRect().top //rec.top, rec.bottom
     	// liHeights.push([height, li]); 
-    	$(li).children().children("textarea").val(thisTop); 
+    	// $(li).children().children("textarea").val(thisTop); 
     });//.each
 	
 	//http://stackoverflow.com/questions/5435228/sort-an-array-with-arrays-in-it-by-string
@@ -84,10 +96,36 @@ $('body').on("mousedown", ".handle", function(e){
 
 });//.mouseDown
 
+// $(document).click(){
+//     if(dragging){
+//         e.preventDefault();
+//         dragging=false; 
+//     }
+// }
 
-$(document).mouseup(function(){
+
+$(document).mouseup(function(e){
     clicking = false;
     $('.clickStatus').text('mouseup');
+
+    if(!dragging){return;}
+    dragging = false; 
+
+    var entry = returnDropEntry(e.pageY);
+    var dropLI = entry[1]; 
+    var aboveBelow = entry[2]; 
+    dragState.newParModel = nodesCollection.findWhere({_id: dropLI.parent().attr("data-id") });
+
+    if(dragState.thisModel == dragState.newParModel){return;}
+    if(dragState.thisLI.attr("data-id") == dropLI.attr('data-id')){return;} 
+    dragState.dropIndex = dropLI.index() + (aboveBelow == "above" ? 0 : 1); 
+    if(dragState.newParModel == dragState.oldParModel){
+        if(dragState.thisLI.index() < dropLI.index()){
+            dragState.dropIndex--; 
+        }
+    }
+    console.log(dragState); 
+    moveNode(dragState.thisModel, dragState.dragIndex, dragState.oldParModel, dragState.newParModel, dragState.dropIndex, true); 
 });
 
 $(document).on("mousemove" ,function(e){
@@ -96,6 +134,7 @@ $(document).on("mousemove" ,function(e){
     	// $('.clickStatus').text('WHAT' + numMoves);
     	return; 
     }
+    dragging=true; 
     $(selectedLI).removeClass("selectedAboveDrop")
     $(selectedLI).removeClass("selectedBelowDrop"); 
     tempEvents.push(e.pageY); //why? //(simple debugging)

public/js/listeners/editorListeners.js

@@ -29,6 +29,8 @@ $(function(){
 		// $(event.target).siblings("a.expandCollapse").css("opacity", ".001")
 	}); 
 
+	
+
 	$("body").on("click", ".expandCollapse", function(event){
 		var LI = $(event.target).parent(); 
 		LI.children("ul").slideToggle(110); 

public/stylesheets/collapse.css

@@ -1,47 +1,55 @@
+
+
+
+
+
 .expandCollapse{
   display: block;
   position: absolute;
   left: -28px;
-  /*margin-top: -23px;*/
   top: -2px;
   opacity: 0.001;
-  /*visibility: hidden; */
+}
+  
+ul li a.zoomButton{
+  display: block;
+  position: absolute;
+  left: -17px;
+
+  height: 11px !important;
+  width: 11px;
+
+  margin-top: 4px;
+  margin-right: 8px;
+
+  
+  
+
+  border: 2px solid black;
+}
+
+.collapsed{
+  background-color: grey;
 }
 
 
 
-  
-  ul li a.zoomButton{
-    display: block;
-    position: absolute;
-    left: -17px;
 
-    height: 11px !important;
-    width: 11px;
 
-    margin-top: 4px;
-    margin-right: 8px;
 
-    /*background: url("smiley.png") no-repeat center; */
-    /*background-color: grey;*/
-    background-size: 140%;
-    
 
-    border: 2px solid black;
-  }
 
-  .collapsed{
-    background-color: grey;
-  }
 
-  ul li i{
-    position: absolute;
-    right: 0px;
-    top: 2px;
-    
-  }
 
-  .handle {
+
+
+
+
+/*OLD CRAP*/
+
+
+
+/*.handle {
   display: float;
   height: 22px;
   width: 16px;
@@ -54,4 +62,4 @@
   height: 16px;
   width: 16px;
   margin-bottom: 8px;
-}
+}*/

public/stylesheets/list.css

@@ -1,77 +1,35 @@
-ul {
-  margin-left: 20px;
-  padding: 0;
-}
-.node {
-  padding: 0;
-  padding-top: 0;
-  margin-left: 0;
-  list-style: none;
-}
 
-.subList {
-  padding-top: 0;
-  padding-bottom: 0;
-}
+
 
 
 .root ul {
-    /*padding: 4px !important; */
-    padding-top: 1px !important;
-    margin-right: 0px !important; 
-    /*margin-left: 25px !important;*/
-    list-style-type: square;
-  }
-  
-  .root li {
-    /*background: brown;*/
-    position: relative;
-    padding: 0;
-    padding-top: 0px;
-    margin: 0;
-    margin-left: 10px;
-    /*margin-bottom: 5px;*/
-    background-repeat: no-repeat;
-    list-style: none;
-    /*background-image: url(smiley.png); */
-    /*background-size: 15px 15px; 
-    background-position: -1px 2px;*/
-  }
-/**************** List *****************/
-
-/*.leaf {
-  margin-left: 20px;
-}
-.expand {
-  display: inline-block;
-  height: 22px;
-  width: 16px;
-}
-.expand a {
-  cursor: pointer;
-  display: block;
   position: relative;
-  text-align: center;
-  vertical-align: center;
-  height: 20px;
-  width: 16px;
-  bottom: 3px;
-  font-size: 18px;
-  text-decoration: none;
-  color: rgb(51, 51, 51);
+  right: 9px; /*controls positioning of border*/
+  /*border-left: 1px solid grey;*/
+
+
+  padding-left: 25px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  
+  list-style-type: square;
 }
 
-.node .content {
-  display: inline-block;
-  vertical-align: top;
-  margin: 0;
+  
+.root li {
+  position: relative;
+  /*box-shadow: 0px 1px 0px blue;*/
+
   padding: 0;
-  width: 100%;
-}
-.node p {
+  padding-top: 0px;
+
   margin: 0;
-  padding: 0;
-  width: auto;
-  font-size: 16px;
-}
-*/
+  margin-left: 10px;
+  margin-bottom: 3px;
+
+  background-repeat: no-repeat;
+  list-style: none;
+  /*background-image: url(smiley.png);
+  /*background-size: 15px 15px; 
+  background-position: -1px 2px;
+}

public/stylesheets/nav.css

@@ -1,33 +1,48 @@
 /************** Navbar *****************/
-.myNav{
+.myNav {
   position: fixed;
   top: 0px;
   width: 100%;
-  height: 26px;
+  /*height: 26px;*/
   background-color: black;
   z-index: 9999; 
 }
 
-.btn{
-  height: 20px;
-  width: 10px;
-}
-
 ul.navbar-right {
   list-style-type: none;
+  display: inline;
 }
-
 .navbar-right > li {
   position: relative;
-  float: left;
+  float: right;
   /*border*/
 }
+.navbar-right > li:hover > a {
+  background: grey; 
+  color: black;
+}
+/*.btn{
+  height: 20px;
+  width: 10px;
+}*/
+
+
+.myNav a {
+  color: grey;
+  padding: 4px 10px;
+  display: inline-block;
+}
+
+#searchBar {
+  margin-top: 2px;
+  width: 150px;
+  height: 20px;
+}
+
 
 .navbar-right > li > a{
   display: block;
-  padding: 2px 20px;
+  padding: 4px 20px;
+  border-left: 2px solid beige;
 }
 
-.navbar-right > li:hover > a {
-  background: grey; 
-}

views/index.ejs

@@ -4,9 +4,10 @@
 
 <link href="stylesheets/externalCSS/reset.css" rel="stylesheet" type="text/css">
 <link href="stylesheets/externalCSS/normalize.css" rel="stylesheet" type="text/css">
-<link href="stylesheets/externalCSS/bootstrap.css" rel="stylesheet" type="text/css">
+
+<!-- <link href="stylesheets/externalCSS/bootstrap.css" rel="stylesheet" type="text/css">
 <link href="stylesheets/externalCSS/toolbar.css" rel="stylesheet" />
-<link href="stylesheets/externalCSS/bootstrap.icons.css" rel="stylesheet" />
+<link href="stylesheets/externalCSS/bootstrap.icons.css" rel="stylesheet" /> -->
 <!-- <link href="stylesheets/style.css" rel="stylesheet" type="text/css"> -->
 <link href="stylesheets/collapse.css" rel="stylesheet" type="text/css">
 <link href="stylesheets/dragDrop.css" rel="stylesheet" type="text/css">
@@ -70,7 +71,7 @@
 <body>
 <div class='myNav'>
   <a class='logoLink'>CoNote</a>
-  <input type='text'>
+  <textarea id='searchBar'> </textarea>
   <a class='btn btn-default'><i class='icon-star'></i></a>
   <a class="clickStatus">Uninitialized</a>