Added grippy-surface area to the right of focused note for drag-and-drop of notes for reordering. Drag-and-drop still unimplemented.

static/css/ie7.css

@@ -31,3 +31,8 @@
   background: none;
   padding: 0;
 }
+
+.note_grabber {
+  position: relative;
+  left: 4px;
+}

static/css/style.css

@@ -275,6 +275,12 @@ h1 {
   background-image: url(/static/images/tree_arrow_down_hover.png);
 }
 
+#grabber_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/grabber_hover.png);
+}
+
 #note_tree_area {
   position: fixed;
   width: 20em;
@@ -535,6 +541,51 @@ h1 {
   overflow-x: auto;
 }
 
+.note_holder {
+  border-width: 0;
+  border-spacing: 0;
+  border-style: none;
+  border-collapse: collapse;
+  margin-bottom: 1em;
+}
+
+.note_holder td {
+  border-width: 0;
+  padding: 0;
+  border-style: none;
+}
+
+.note_grabber {
+  -moz-border-radius-topright: 5px;
+  -moz-border-radius-bottomright: 5px;
+  -moz-user-select: none;
+  color: #fafafa;
+  background-color: #fafafa;
+  min-width: 20px;
+  width: 20px;
+  max-width: 20px;
+}
+
+.note_grabber:hover {
+  color: #ffcc66;
+  background-color: #ffcc66;
+  background: url(/static/images/grabber_hover.png) center top repeat-y;
+  cursor: move;
+}
+
+.note_grabber_focused {
+  color: #d0e0f0;
+  background-color: #d0e0f0;
+  background: url(/static/images/grabber.png) center top repeat-y;
+}
+
+.note_grabber_focused:hover {
+  color: #ffcc66;
+  background-color: #ffcc66;
+  background: url(/static/images/grabber_hover.png) center top repeat-y;
+  cursor: move;
+}
+
 .static_note_div {
   -moz-border-radius: 5px;
   display: block;
@@ -544,7 +595,6 @@ h1 {
   overflow: hidden;
   width: 100%;
   border: 2px solid #999999;
-  margin-bottom: 1em;
   background-color: #ffffff;
   overflow-x: auto;
 }
@@ -763,6 +813,7 @@ h1 {
 .static_note_contents .user_status {
   font-size: 82%;
 }
+
 .page_title a {
   color: #000000;
   text-decoration: none;

static/js/Editor.js

@@ -98,6 +98,7 @@ Editor.prototype.create_div = function ( position_after ) {
   if ( static_note_div ) {
     this.note_controls = getElement( "note_controls_" + this.id );
     this.holder = getElement( "note_holder_" + this.id );
+    this.grabber = getElement( "note_grabber_" + this.id );
     this.connect_note_controls( true );
     this.div = static_note_div;
     this.div.editor = this;
@@ -120,9 +121,15 @@ Editor.prototype.create_div = function ( position_after ) {
   this.create_note_controls();
   this.connect_note_controls();
 
-  this.holder = createDOM( "div", { "id": "note_holder_" + this.id, "class": "note_holder" },
-    this.note_controls,
-    this.div
+  this.grabber = createDOM( "td", { "id": "note_grabber_" + this.id, "class": "note_grabber" } );
+  this.holder = createDOM( "table", { "id": "note_holder_" + this.id, "class": "note_holder" },
+    createDOM( "tr", {},
+      createDOM( "td", {}, this.note_controls )
+    ),
+    createDOM( "tr", {},
+      createDOM( "td", { "width": "100%" }, this.div ),
+      this.grabber
+    )
   );
 
   if ( position_after && position_after.parentNode )
@@ -263,6 +270,7 @@ Editor.prototype.claim_iframe = function ( position_after ) {
   addElementClass( this.iframe, "focused_note_frame" );
   removeElementClass( this.iframe, "invisible" );
   addElementClass( this.div, "invisible" );
+  addElementClass( this.grabber, "note_grabber_focused" );
 
   function finish_init() {
     self.position_cursor( range );
@@ -620,14 +628,12 @@ Editor.prototype.resize = function ( get_height_from_div ) {
   this.reposition();
 
   var height = null;
-  var width = elementDimensions( this.div.parentNode ).w;
+  var width = elementDimensions( this.div ).w;
 
   // set the width first, because that influences the height of the content
-  if ( MSIE6 )
-    width -= FRAME_BORDER_HEIGHT * 2;
+  width -= FRAME_BORDER_HEIGHT * 2;
   var size = { "w": width };
   setElementDimensions( this.iframe, size );
-  setElementDimensions( this.div, size );
 
   if ( get_height_from_div && !this.empty() ) {
     height = elementDimensions( this.div ).h;
@@ -1085,6 +1091,7 @@ Editor.prototype.blur = function () {
   this.scrape_title();
 
   removeElementClass( this.iframe || this.div, "focused_note_frame" );
+  removeElementClass( this.grabber, "note_grabber_focused" );
 }
 
 Editor.prototype.release_iframe = function () {

view/Main_page.py

@@ -2,7 +2,7 @@ from urllib import urlencode
 from cgi import escape
 from Page import Page
 from Header import Header
-from Tags import Link, Input, Div, Span, H2, H4, A, Br, Strong, Script, Img, P, Noscript
+from Tags import Link, Input, Div, Span, H2, H4, A, Br, Strong, Script, Img, P, Noscript, Table, Td, Tr
 from Note_tree_area import Note_tree_area
 from Link_area import Link_area
 from Toolbar import Toolbar
@@ -89,15 +89,27 @@ class Main_page( Page ):
       )
 
     def static_note_divs( notes, read_write ):
-      return [ Div(
-        note_controls( note, read_write ),
-        Div(
-          Span(
-            note.contents,
-            class_ = u"static_note_contents",
+      return [ Table(
+        Tr( Td(
+          note_controls( note, read_write ),
+        ) ),
+        Tr(
+          Td(
+            Div(
+              Span(
+                note.contents,
+                class_ = u"static_note_contents",
+              ),
+              id = "static_note_%s" % note.object_id,
+              class_ = u"static_note_div",
+            ),
+            width = "100%",
+          ),
+          Td(
+            u".....",
+            id = u"note_grabber_%s" % note.object_id,
+            class_ = u"note_grabber",
           ),
-          id = "static_note_%s" % note.object_id,
-          class_ = u"static_note_div",
         ),
         id = u"note_holder_%s" % note.object_id,
         class_ = u"note_holder",
@@ -302,4 +314,5 @@ class Main_page( Page ):
         ),
         id = u"everything_area",
       ),
+      Span( id = "grabber_hover_preload" ),
     )