diff --git a/web/Makefile b/web/Makefile
index e32d7f8..18f1b35 100644
--- a/web/Makefile
+++ b/web/Makefile
@@ -125,12 +125,10 @@
 		--v23.credentials="credentials" \
 		--v23.permissions.literal='{"Admin":{"In":["..."]},"Write":{"In":["..."]},"Read":{"In":["..."]},"Resolve":{"In":["..."]},"Debug":{"In":["..."]}}'
 
-.PHONY:
 vdl: browser/vanadium/vdl/index.js
-	@true  # silence "make: Nothing to be done for `vdl'."
 
 browser/vanadium/vdl/index.js: $(vdl_files)
 	VDLPATH=$(VDLPATH) vdl generate --lang javascript \
 		-js-out-dir ./browser/vanadium \
 		vdl
-
+	@touch $@
diff --git a/web/browser/components/device-set/index.js b/web/browser/components/device-set/index.js
index 5b60ea5..bc1ad58 100644
--- a/web/browser/components/device-set/index.js
+++ b/web/browser/components/device-set/index.js
@@ -7,7 +7,9 @@
 var extend = require('xtend');
 var file = require('../file');
 var hg = require('mercury');
+var modal = require('../modal');
 var read = require('../../dom/read-blob');
+var util = require('../../util');
 var uuid = require('uuid').v4;
 
 module.exports = {
@@ -30,6 +32,8 @@
   var atom = hg.state({
     id: hg.value(options.id),
     error: hg.value(null),
+    modal: modal.state(options.modal),
+
     file: file.state(options.file),
     pdf: hg.value(null),
     pages: hg.varhash({
@@ -37,12 +41,27 @@
       current: options.pages.current || 1,
     }),
     progress: hg.value(0),
+
     devices: hg.varhash(options.devices, device.state),
+
+    manager: hg.struct({
+      active: hg.value(true),
+      dragID: hg.value(''),
+      overID: hg.value(''),
+    }),
     channels: {
       load: load,
       previous: previous,
       next: next,
-      manage: manage
+
+      manage: manage,
+
+      unlink: unlink,
+      link: link,
+
+      drag: drag,
+      reorder: reorder,
+      reset: reset
     }
   });
 
@@ -130,10 +149,85 @@
 }
 
 function manage(state, data) {
-  debug('manage device set: %s', state.id());
+  state.modal.active.set(true);
+}
+
+function unlink(state, data) {
+  var device = state.devices.get(data.id);
+  device.linked.set(false);
+  device.index.set(null);
+
+  // TODO(jasoncampbell): Refactor so that re-indexing is not required.
+  util
+  .toArray(state.devices)
+  .sort(function sortByIndex(a, b) {
+    var value = 0;
+
+    if (a.index > b.index) {
+      value = 1;
+    }
+
+    if (a.index < b.index) {
+      value = -1;
+    }
+
+    return value;
+  }).filter(function filter(device) {
+    return device.linked();
+  }).forEach(function (device, index) {
+    debug('reindexing: %s', device.id());
+    device.index.set(index);
+  });
+
+  // Reset the manager.
+  reset(state, data);
+}
+
+function link(state, data) {
+  var device = state.devices.get(data.id);
+
+  // This could go away once the drag handlers broadcast correctly.
+  if (! data.id || !device || device.linked()) {
+    return;
+  }
+
+  // TODO(jasoncampbell): Refactor so that re-indexing is not required.
+  var linked = util.toArray(state.devices()).filter(function(device) {
+    return device.linked;
+  });
+
+  device.linked.set(true);
+  device.index.set(linked.length);
 }
 
 // Prevent circular references when serializing state.
 function _PDFDocumentProxyToJSON() {
   return {};
 }
+
+function drag(state, data) {
+  if (data.dragging) {
+    state.manager.dragID.set(data.id);
+  } else {
+    state.manager.dragID.set('');
+  }
+}
+
+function reorder(state, data) {
+  if (!data.dragging) {
+    return;
+  }
+
+  var droptarget = state.devices.get(data.droptarget);
+  var dragtarget = state.devices.get(data.dragtarget);
+  var index = droptarget.index();
+
+  // Swap drag and drop target indexes.
+  droptarget.index.set(dragtarget.index());
+  dragtarget.index.set(index);
+}
+
+function reset(state, data) {
+  state.manager.overID.set('');
+  state.manager.dragID.set('');
+}
diff --git a/web/browser/components/device-set/manager.css b/web/browser/components/device-set/manager.css
new file mode 100644
index 0000000..63b6b98
--- /dev/null
+++ b/web/browser/components/device-set/manager.css
@@ -0,0 +1,31 @@
+/* Copyright 2015 The Vanadium Authors. All rights reserved. */
+/* Use of this source code is governed by a BSD-style */
+/* license that can be found in the LICENSE file. */
+
+@import "../base/variables.css";
+@import "../base/typography.css";
+
+.manager .devices-linked,
+.manager .devices-unlinked {
+  margin-bottom: var(--gutter);
+}
+
+.manager .devices-unlinked {
+  border: 1px solid yellow;
+}
+
+.manager .title {
+  inherits: .type-title;
+  margin-bottom: var(--gutter);
+}
+
+.manager .list {
+  border: 1px solid red;
+}
+
+.manager .item {
+  margin: var(--gutter);
+  padding: var(--gutter);
+  cursor: move;
+  border: 1px solid magenta;
+}
diff --git a/web/browser/components/device-set/pdf-viewer.css b/web/browser/components/device-set/pdf-viewer.css
index 662cb45..4e20723 100644
--- a/web/browser/components/device-set/pdf-viewer.css
+++ b/web/browser/components/device-set/pdf-viewer.css
@@ -41,7 +41,7 @@
   align-items: center;
   background-color: var(--white);
   box-shadow: var(--drop-shadow);
-  z-index: 900;
+  z-index: 4;
   display: flex;
 }
 
diff --git a/web/browser/components/device-set/render.js b/web/browser/components/device-set/render.js
index 296ae3b..1ed0566 100644
--- a/web/browser/components/device-set/render.js
+++ b/web/browser/components/device-set/render.js
@@ -5,27 +5,35 @@
 var click = require('../../events/click');
 var css = require('./pdf-viewer.css');
 var debug = require('debug')('reader:device-set');
+var drag = require('../../events/drag');
+var dragover = require('../../events/dragover');
+var drop = require('../../events/drop');
 var format = require('format');
 var h = require('mercury').h;
 var hg = require('mercury');
 var insert = require('insert-css');
+var managerCSS = require('./manager.css');
+var modal = require('../modal');
 var PDFWidget = require('./pdf-widget');
 
 module.exports = render;
 
 function render(state, channels) {
+  debug('render: %o', state);
+
   insert(css);
 
+  var node = manager(state, channels);
+
   return h('.pdf-viewer', [
     hg.partial(progress, state.progress),
     hg.partial(controls, state, channels),
-    h('.pdf-widget', new PDFWidget(state))
+    h('.pdf-widget', new PDFWidget(state)),
+    hg.partial(modal.render, state.modal, node)
   ]);
 }
 
 function progress(state) {
-  debug('progress: %s', state);
-
   if (state >= 100) {
     return h('.progress.hidden');
   }
@@ -76,3 +84,104 @@
   ]);
 }
 
+function manager(state, channels) {
+  // If the initiator is the current device show the device list manager UI.
+  // Else show the remote control manager.
+  insert(managerCSS);
+
+  // TODO(jasoncampbell): Refactor so that re-indexing is not required.
+  // Use a single loop to create each linked, and unlinked vnode children arrays
+  // which are sorted in the correct order.
+  var linked = [];
+  var unlinked = [];
+  var keys = Object.keys(state.devices);
+  var length = keys.length;
+  for (var i = 0; i < length; i++) {
+    var id = keys[i];
+    var device = state.devices[id];
+    if (device.linked) {
+      // Add the node to the linked array at the correct index to preserve the
+      // order.
+      linked.push(device);
+    } else {
+      unlinked.push(device);
+    }
+  }
+
+  linked = linked.sort(function sort(a, b){
+    var value = 0;
+
+    if (a.index > b.index) {
+      value = 1;
+    }
+
+    if (a.index < b.index) {
+      value = -1;
+    }
+
+    return value;
+  });
+
+  return h('.manager', [
+    h('.devices-linked', {
+      'ev-event': [
+        dragover(channels.link, {
+          id: state.manager.dragID
+        }),
+        drop(channels.reset)
+      ]
+    }, [
+      h('.title', 'Linked devices (drag to reorder)'),
+      h('.list', linked.map(function (device) {
+        return hg.partial(item, device, state, channels);
+      }))
+    ]),
+    h('.devices-unlinked', {
+      'ev-event': drop(channels.unlink, {
+        id: state.manager.dragID
+      })
+    }, [
+      h('.title', 'Unlinked devices (drag here to unlink)'),
+      h('.list', unlinked.map(function (device) {
+        return hg.partial(item, device, state, channels);
+      }))
+    ])
+  ]);
+}
+
+function item(device, state, channels) {
+  if (state.manager.dragID === device.id) {
+    return h('.item.placeholder', {
+      'ev-event': drop(channels.reset)
+    }, format('PLACEHOLDER: %s - index: %s', device.id, device.index));
+  }
+
+  var current = device.current ? 'CURRENT' : '';
+
+  var classNames = [];
+  if (state.manager.overID) {
+    classNames.push('over');
+  }
+
+  if (device.current) {
+    classNames.push('current');
+  }
+
+  var events = [
+    drag(channels.drag, { id: device.id }),
+  ];
+
+  if (device.linked) {
+    // Only reorder linked devices.
+    events.push(dragover(channels.reorder, {
+      droptarget: device.id,
+      dragtarget: state.manager.dragID
+    }));
+  }
+
+  return h('.item', {
+    className: classNames.join(' '),
+    draggable: true,
+    'ev-event': events,
+  }, format('%s - index: %s %s', device.id, device.index, current));
+}
diff --git a/web/browser/components/device-sets/index.js b/web/browser/components/device-sets/index.js
index 5867b40..515e271 100644
--- a/web/browser/components/device-sets/index.js
+++ b/web/browser/components/device-sets/index.js
@@ -63,6 +63,13 @@
 
   ds.devices.put(d.id(), d);
   state.collection.put(ds.id(), ds);
+
+  // TODO(jasoncampbell): Remove once syncbase is hooked back up.
+  debug('adding 3 more fake devices for debugging');
+  for (var i = 0; i < 3; i++) {
+    d = device.state({ index: i + 1 });
+    ds.devices.put(d.id(), d);
+  }
 }
 
 function remove(state, data) {
diff --git a/web/browser/components/device/index.js b/web/browser/components/device/index.js
index 0d3b036..aee0031 100644
--- a/web/browser/components/device/index.js
+++ b/web/browser/components/device/index.js
@@ -17,12 +17,17 @@
 function state(options, key) {
   options = extend({
     id: key || uuid(),
-    screen: {}
+    linked: true,
+    screen: {},
+    index: 0
   }, options);
+
   debug('init: %o', options);
 
   var atom = hg.state({
     id: hg.value(options.id),
+    linked: hg.value(options.linked),
+    index: hg.value(options.index),
     current: hg.value(options.current || false),
     type: hg.value(options.type),
     alias: hg.value(options.alias),
diff --git a/web/browser/components/header/index.css b/web/browser/components/header/index.css
index 9a1ca7f..aa45eb8 100644
--- a/web/browser/components/header/index.css
+++ b/web/browser/components/header/index.css
@@ -14,7 +14,7 @@
   background-color: var(--cyan-800);
   box-shadow: var(--drop-shadow);
   color: var(--white);
-  z-index: 900;
+  z-index: 2;
 }
 
 header.hidden {
diff --git a/web/browser/components/modal/index.js b/web/browser/components/modal/index.js
new file mode 100644
index 0000000..92112f2
--- /dev/null
+++ b/web/browser/components/modal/index.js
@@ -0,0 +1,56 @@
+// Copyright 2015 The Vanadium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+var assert = require('assert');
+var click = require('../../events/click');
+var css = require('./modal.css');
+var extend = require('xtend');
+var h = require('mercury').h;
+var hg = require('mercury');
+var insert = require('insert-css');
+
+module.exports = {
+  state: state,
+  render: render
+};
+
+var defaults = {
+  active: false
+};
+
+function state(options) {
+  options = extend(defaults, options);
+
+  return hg.state({
+    active: hg.value(!!options.active),
+    channels: {
+      show: show,
+      hide: hide
+    }
+  });
+}
+
+function show(state, data) {
+  state.active.set(true);
+}
+
+function hide(state, data) {
+  state.active.set(false);
+}
+
+function render(state, vnode) {
+  assert.equal(vnode.constructor.name,
+    'VirtualNode',
+    'The second argument must be a VirtualNode.');
+  insert(css);
+
+  return h('.modal', {
+    className: state.active ? 'active' : 'hidden'
+  }, [
+    h('.modal-blocker', {
+      'ev-click': click(state.channels.hide)
+    }),
+    h('.modal-dialog', vnode)
+  ]);
+}
\ No newline at end of file
diff --git a/web/browser/components/modal/modal.css b/web/browser/components/modal/modal.css
new file mode 100644
index 0000000..78190db
--- /dev/null
+++ b/web/browser/components/modal/modal.css
@@ -0,0 +1,41 @@
+/* Copyright 2015 The Vanadium Authors. All rights reserved. */
+/* Use of this source code is governed by a BSD-style */
+/* license that can be found in the LICENSE file. */
+
+@import "../base/variables.css";
+
+.modal {
+  visibility: visible;
+}
+
+.modal.hidden {
+  visibility: hidden;
+}
+
+.modal-blocker {
+  position: fixed;
+  z-index: 888;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.24);
+}
+
+.modal-dialog {
+  position: absolute;
+  z-index: 999;
+  /* HACK: Header's title line-height + 2x the gutters. */
+  top: calc(20px + (var(--gutter) * 3));
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 2px;
+  box-shadow: var(--drop-shadow);
+  margin: var(--gutter);
+  padding: var(--gutter);
+  background-color: var(--blue-grey-25);
+  overflow: scroll;
+}
\ No newline at end of file
diff --git a/web/browser/components/mover/index.css b/web/browser/components/mover/index.css
deleted file mode 100644
index b220a53..0000000
--- a/web/browser/components/mover/index.css
+++ /dev/null
@@ -1,141 +0,0 @@
-/* Copyright 2015 The Vanadium Authors. All rights reserved. */
-/* Use of this source code is governed by a BSD-style */
-/* license that can be found in the LICENSE file. */
-
-@import "../base/variables.css";
-@import "../base/typography.css";
-
-.overlayBackground {
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: rgba(0,0,0,0.75);
-  z-index: 100;
-  width: 100%;
-  height: 100%;
-}
-
-.addButton {
-  position: fixed;
-  background-color: var(--deeporange-A200);
-  color: var(--white);
-  z-index: 150;
-  width: 5%;
-  height: 96%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 2em;
-}
-
-.addBeforeButton {
-  top: 2%;
-  left: 2%;
-}
-
-.addAfterButton {
-  top: 2%;
-  left: 93%;
-}
-
-.textButton {
-  background-color: var(--blue-grey-800);
-  color: var(--white-54);
-  z-index: 150;
-  width: 10%;
-  height: 3em;
-  margin: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1em;
-}
-
-.cancelBeforeAfterButton {
-  position: fixed;
-  top: 40%;
-  left: 45%;
-}
-
-.movingThisDevice {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-}
-
-.moveDeviceRow {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 150px;
-}
-
-.deviceMovementSpace {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-}
-
-.buttonRow {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 150px;
-}
-
-.moveDevice {
-  border: 2px solid var(--deeporange-A200);
-  background-color: var(--grey-700);
-  color: var(--deeporange-A200);
-  z-index: 200;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 2em;
-  height: 75px;
-  width: 50px;
-  margin: 20px;
-}
-
-.moveTarget {
-  height: 25px;
-  width: 25px;
-  border-radius: 50%;
-  background-color: var(--grey-700);
-  z-index: 150;
-  margin: 20px;
-}
-
-.overMoveTarget {
-  height: 35px;
-  width: 35px;
-  background-color: var(--deeporange-A200);
-  margin: 15px;
-}
-
-.deviceTile {
-  border: 2px solid var(--white-54);
-  background-color: var(--grey-700);
-  color: var(--deeporange-A200);
-  z-index: 150;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 2em;
-  height: 75px;
-  width: 50px;
-  margin: 20px;
-}
-
-.linkLabel {
-  color: var(--white-54);
-}
diff --git a/web/browser/components/mover/index.js b/web/browser/components/mover/index.js
deleted file mode 100644
index 80408b6..0000000
--- a/web/browser/components/mover/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright 2015 The Vanadium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-module.exports = {
-  state: require('./state'),
-  render: require('./render')
-};
diff --git a/web/browser/components/mover/render.js b/web/browser/components/mover/render.js
deleted file mode 100644
index c7233f1..0000000
--- a/web/browser/components/mover/render.js
+++ /dev/null
@@ -1,137 +0,0 @@
-// Copyright 2015 The Vanadium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-var hg = require('mercury');
-var h = require('mercury').h;
-var insert = require('insert-css');
-var css = require('./index.css');
-var dragdrop = require('../../events/dragdrop');
-var droptarget = require('../../events/droptarget');
-
-module.exports = render;
-
-function render(state, channels) {
-  insert(css);
-
-  var moving = state.moving;
-  var movingThisDevice = state.movingThisDevice;
-
-  return h('.moveOverlay', {
-      hidden: !moving,
-    }, [
-    h('.overlayBackground', [
-      movingThisDevice ?
-        hg.partial(moveThisDeviceControls, state, channels) :
-        hg.partial(moveOtherDeviceControls, state, channels)
-    ])
-  ]);
-}
-
-function moveOtherDeviceControls(state, channels) {
-  return h('.movingOtherDevice', [
-    h('button.addBeforeButton .addButton', {
-      'ev-click': hg.send(channels.before)
-    }, '+'),
-    h('button.textButton .cancelBeforeAfterButton', {
-      'ev-click': hg.send(channels.cancel)
-    }, 'Cancel'),
-    h('button.addAfterButton .addButton', {
-      'ev-click': hg.send(channels.after)
-    }, '+')
-  ]);
-}
-
-function moveThisDeviceControls(state, channels) {
-  var numDevicesInLinkedSet = state.numDevicesInLinkedSet;
-  var firstPageNum = state.firstPageNum;
-  var insertAtIndex = state.insertAtIndex;
-  var highlightAtIndex = state.highlightAtIndex;
-
-  var deviceTargetArray = [];
-  // This is Used to adjust page numbers of devices after an insert
-  var newPageOffset = 0;
-
-  // Create a move target and device tile for each device already in the set
-  for(var i = 0; i < numDevicesInLinkedSet; i++) {
-    if (i === insertAtIndex) {
-      // As long as the first page isn't page 1, put the new device before
-      // the first device page
-      var devicePageNum = firstPageNum + i;
-      if (i === 0 && firstPageNum !== 1) {
-        devicePageNum = firstPageNum - 1;
-      } else {
-        newPageOffset = 1;
-      }
-      deviceTargetArray.push(moveDevice(String(devicePageNum), channels));
-    } else {
-      deviceTargetArray.push(moveTarget(i,
-                             (i === highlightAtIndex),
-                             channels));
-    }
-    deviceTargetArray.push(h('.deviceTile',
-                             String(firstPageNum + i + newPageOffset)));
-  }
-
-  // Create the final item in the list of devices and targets
-  // ---
-  // If the insert index is equal to the number of devices in the set,
-  // then it will be added at the end of the existing set. Otherwise
-  // we show the final drop target
-  var finalItem;
-  if (insertAtIndex === numDevicesInLinkedSet) {
-    var pageNum = firstPageNum + numDevicesInLinkedSet;
-    finalItem = moveDevice(String(pageNum), channels);
-  } else {
-    var highlightLast = numDevicesInLinkedSet === highlightAtIndex;
-    finalItem = moveTarget(numDevicesInLinkedSet, highlightLast, channels);
-  }
-  deviceTargetArray.push(finalItem);
-
-  // The starting position of the device is above the device list, and
-  // can either be the device or a move target
-  var startNode;
-  if (insertAtIndex < 0) {
-    startNode = moveDevice('D', channels);
-  } else {
-    // We the number of devices + 1 as the index for the start move target
-    // to enable proper highlighting
-    var startTargetIndex = numDevicesInLinkedSet + 1;
-    var highlightStart = (numDevicesInLinkedSet + 1) === highlightAtIndex;
-    startNode = moveTarget(startTargetIndex, highlightStart, channels);
-  }
-
-  return h('.movingThisDevice', [
-    h('.moveDeviceRow', [
-      startNode,
-      h('.linkLabel', (insertAtIndex < 0) ? 'Unlinked' : 'Linked')
-    ]),
-    h('.deviceMovementSpace', deviceTargetArray),
-    h('.buttonRow', [
-      h('button.textButton', {
-        'ev-click': hg.send(channels.cancel)
-      }, 'Cancel'),
-      h('button.textButton', {
-        'ev-click': hg.send(channels.commit)
-      }, 'OK')
-    ])
-  ]);
-}
-
-function moveDevice(label, channels) {
-  return h('.moveDevice', {
-    draggable: true,
-    'ev-mousedown': dragdrop(channels.dragend)
-  }, label);
-}
-
-function moveTarget(index, highlightFlag, channels) {
-  var classNames = '.moveTarget' + (highlightFlag ? ' .overMoveTarget' : '');
-
-  return h(classNames, {
-    'ev-dragenter': droptarget(channels.dragenter, { index: index }),
-    'ev-dragover': droptarget(channels.dragover, { index: index }),
-    'ev-dragleave': hg.send(channels.dragleave, { index: index }),
-    'ev-drop': hg.send(channels.selected, { index: index })
-  },[]);
-}
diff --git a/web/browser/components/mover/state.js b/web/browser/components/mover/state.js
deleted file mode 100644
index 9cd5090..0000000
--- a/web/browser/components/mover/state.js
+++ /dev/null
@@ -1,105 +0,0 @@
-// Copyright 2015 The Vanadium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-var hg = require('mercury');
-var debug = require('debug')('reader:mover');
-
-module.exports = create;
-
-function create(options) {
-  debug('creating Mover state: %o', options);
-
-  var state = hg.state({
-    error: hg.value(null),
-    moving: hg.value(false),
-    movingThisDevice: hg.value(false),
-    insertAtIndex: hg.value(-1),
-    highlightAtIndex: hg.value(-1),
-    channels: {
-      // User clicks to add/move the device before this one
-      before: previous,
-      // User clicks to add/move the device after this one
-      after: next,
-      // User clicks the cancel button
-      cancel: cancel,
-      // User selects location for new device manually (only on moving device)
-      selected: link,
-      // User clicks ok after selecting a new device location
-      commit: commit,
-      // Drop target channels
-      dragenter: highlightTarget,
-      dragleave: unhighlightTarget,
-      // 'dragenter' and 'dragover' events that occur on valid drop targets
-      // need to have event.preventDefault() called.  This happens in the
-      // droptarget event handler, which then broadcasts to a channel.
-      // In the case of dropover, nothing else needs to happen, thus the
-      // need for this channel handler.
-      dragover: noop,
-      // 'dragend' is also caught by the dragdrop event handler and broadcast
-      // to a channel, but we do not currently have anything to do when this
-      // happens.  A successful drop is handled by the drop event, which is
-      // communicated via the commit channel.
-      dragend: noop
-    },
-    // These states should be linked into syncbase, but are here now until
-    // that's ready
-    numDevicesInLinkedSet: hg.value(4),
-    firstPageNum: hg.value(2)
-  });
-
-  state.error(function(err) {
-    if (!err) {
-      return;
-    }
-
-    console.error('TODO: add an error component');
-    console.error(err.stack);
-  });
-
-  return state;
-}
-
-function previous(state, data) {
-  // TODO(jwnichols): This result of this decision needs to be determined and
-  // then echoed to other devices
-  state.moving.set(false);
-}
-
-function next(state, data) {
-  // TODO(jwnichols): This result of this decision needs to be determined and
-  // then echoed to other devices
-  state.moving.set(false);
-}
-
-function cancel(state, data) {
-  // Leave the move state without making any changes
-  // TODO(jwnichols): This may need to be echoed to other devices
-  state.moving.set(false);
-}
-
-function link(state, data) {
-  if (data.index > state.numDevicesInLinkedSet()) {
-    state.insertAtIndex.set(-1);
-  } else {
-    state.insertAtIndex.set(data.index);
-  }
-}
-
-function commit(state, data) {
-  // TODO(jwnichols): This result of this decision needs to be determined and
-  // then echoed to other devices
-  state.moving.set(false);
-}
-
-function highlightTarget(state, data) {
-  state.highlightAtIndex.set(data.index);
-}
-
-function unhighlightTarget(state, data) {
-  state.highlightAtIndex.set(-1);
-}
-
-function noop(state, data) {
-  // The equivalent of a dev/null channel method
-}
diff --git a/web/browser/events/drag.js b/web/browser/events/drag.js
new file mode 100644
index 0000000..d5ba0ed
--- /dev/null
+++ b/web/browser/events/drag.js
@@ -0,0 +1,91 @@
+// Copyright 2015 The Vanadium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+var BaseEvent = require('mercury').BaseEvent;
+var extend = require('xtend');
+var hg = require('mercury');
+
+var delegator = hg.Delegator();
+
+// Listen to the low frequency, drag related events. The high frequency "data"
+// event is managed directly during event registration and removal in the drag
+// handler.
+delegator.listenTo('dragstart');
+delegator.listenTo('dragend');
+
+module.exports = BaseEvent(handleDrag); // jshint ignore:line
+
+// # var drag = require('./events/drag')
+//
+// Use as a drag handler in virtual-dom using either ev-event or ev-mousedown.
+// NOTE: The `draggable` attribute must be set to true on the vnode.
+//
+//     h('.drag-me', {
+//       draggable: true,
+//       'ev-event': drag(sink, { foo: 'bar' })
+//     })
+//
+// The `drag` handler will manage all event registration and listening across
+// the lifespan of dragging on the target element. The broadcast to the `sink`
+// will happen with an extra attribute merged into the passed in data:
+//
+// * dragstart: { dragging: true }
+// * dragend: { dragging: false }
+//
+// Additionally, on the dragstart event any passed in data will be JSON encoded
+// and attached to the native event's dataTransfer object. This enables it's
+// retrieval from the drop DOM event (handled by `./events/drop`).
+//
+// NOTE: Currently this handle does not broadcast on high-frequency drag events,
+// the necessary code has been stubbed out below for easy modification in the
+// future.
+function handleDrag(ev, broadcast) {
+  // Only handle mousedown events, allows usage of ev-events for simplicity.
+  if (ev.type !== 'mousedown') {
+    return;
+  }
+
+  var data = this.data;
+  var element = ev.target;
+
+  delegator.listenTo('drag');
+  delegator.addEventListener(element, 'dragstart', dragstart);
+  delegator.addEventListener(element, 'drag', drag);
+  delegator.addEventListener(element, 'dragend', dragend);
+
+  // NOTE: Do not broadcast until the actual drag events have been fired.
+  return;
+
+  // Fired when the user starts dragging the target element.
+  // SEE: https://developer.mozilla.org/en-US/docs/Web/Events/dragstart
+  function dragstart(event) {
+    // Using the raw DOM Event to access the DataTransfer object to set
+    // draggable data and the drag effect. This makes it possible for drop
+    // targets to access the data later.
+    //
+    // NOTE: dragover events do not have access to the data set below.
+    // SEE: https://goo.gl/fpwfP3
+    var raw = event._rawEvent;
+    raw.dataTransfer.setData('application/json', JSON.stringify(data));
+    raw.dataTransfer.effectAllowed = 'move';
+
+    broadcast(extend(data, { dragging: true }));
+  }
+
+  // Fires when the element is being dragged every few hundred ms. Currently a
+  // noop.
+  // SEE: https://developer.mozilla.org/en-US/docs/Web/Events/drag
+  function drag(event) {}
+
+  // Fired when dragging has ended.
+  // SEE: https://developer.mozilla.org/en-US/docs/Web/Events/dragend
+  function dragend(event) {
+    delegator.unlistenTo('drag');
+    delegator.removeEventListener(element, 'dragstart', dragstart);
+    delegator.removeEventListener(element, 'drag', drag);
+    delegator.removeEventListener(element, 'dragend', dragend);
+
+    broadcast(extend(data, { dragging: false }));
+  }
+}
diff --git a/web/browser/events/dragdrop.js b/web/browser/events/dragdrop.js
deleted file mode 100644
index 3e2a9c6..0000000
--- a/web/browser/events/dragdrop.js
+++ /dev/null
@@ -1,45 +0,0 @@
-// Copyright 2015 The Vanadium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-var hg = require('mercury');
-var BaseEvent = require('mercury').BaseEvent;
-
-module.exports = BaseEvent(dragHandler); // jshint ignore:line
-
-function dragHandler(ev, broadcast) {
-  var delegator = hg.Delegator();
-  var events = ['dragstart', 'dragenter', 'dragover', 'drop',
-                'dragend', 'dragleave'];
-
-  function onstart(ev2) {
-    // get the dataTransfer object out of the underlying event
-    var dt = ev2._rawEvent.dataTransfer;
-
-    // Set the data type to something unique to ensure our device cannot
-    // be dragged to anything else.  Despite the name, no real data is
-    // being transferred here.
-    dt.setData('application/vnd.vanadium.device', 'vanadium device');
-
-    // Set the drag effect
-    dt.effectAllowed = 'move';
-
-    // Remove the drag start listener
-    delegator.removeGlobalEventListener('dragstart', onstart);
-  }
-
-  function oncomplete(ev2) {
-    // Merges passed in data and broadcasts
-    broadcast(this.data);
-
-    events.forEach(function(arg) { delegator.unlistenTo(arg); });
-    delegator.removeGlobalEventListener('mouseup', oncomplete);
-    delegator.removeGlobalEventListener('dragend', oncomplete);
-    delegator.removeGlobalEventListener('dragstart', onstart);
-  }
-
-  events.forEach(function(arg) { delegator.listenTo(arg); });
-  delegator.addGlobalEventListener('dragstart', onstart);
-  delegator.addGlobalEventListener('mouseup', oncomplete);
-  delegator.addGlobalEventListener('dragend', oncomplete);
-}
diff --git a/web/browser/events/dragover.js b/web/browser/events/dragover.js
new file mode 100644
index 0000000..474b4ae
--- /dev/null
+++ b/web/browser/events/dragover.js
@@ -0,0 +1,59 @@
+// Copyright 2015 The Vanadium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+var BaseEvent = require('mercury').BaseEvent;
+var extend = require('xtend');
+var hg = require('mercury');
+
+// Listen to the low frequency, drop related events.
+var delegator = hg.Delegator();
+delegator.listenTo('dragenter');
+delegator.listenTo('dragleave');
+delegator.listenTo('drop');
+
+module.exports = BaseEvent(handleDragover); // jshint ignore:line
+
+function handleDragover(ev, broadcast) {
+  // Only handle dragenter events, allows usage of ev-events for simplicity.
+  if (ev.type !== 'dragenter') {
+    return;
+  }
+
+  var element = ev.target;
+  var data = this.data;
+
+  delegator.listenTo('dragover');
+  delegator.addEventListener(element, 'dragover', dragover);
+  delegator.addEventListener(element, 'dragleave', dragleave);
+  delegator.addEventListener(element, 'drop', drop);
+
+  broadcast(extend(data, {
+    dragging: true
+  }));
+
+  return;
+
+  // Attached to the dragover event, this handler fires every few hundred ms.
+  // SEE: https://developer.mozilla.org/en-US/docs/Web/Events/dragover
+  function dragover(event) {
+    // Prevent default in order to allow/enable the drop event to fire.
+    event.preventDefault();
+  }
+
+  function dragleave(event) {
+    delegator.unlistenTo('dragleave');
+    delegator.removeEventListener(element, 'dragover', dragover);
+    delegator.removeEventListener(element, 'dragleave', dragleave);
+    delegator.removeEventListener(element, 'drop', drop);
+
+    broadcast(extend(data, {
+      dragging: false
+    }));
+  }
+
+  function drop(event) {
+    dragleave(event);
+  }
+}
+
diff --git a/web/browser/events/drop.js b/web/browser/events/drop.js
new file mode 100644
index 0000000..997e41f
--- /dev/null
+++ b/web/browser/events/drop.js
@@ -0,0 +1,76 @@
+// Copyright 2015 The Vanadium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+var BaseEvent = require('mercury').BaseEvent;
+var extend = require('xtend');
+var hg = require('mercury');
+
+// Listen to the low frequency, drop related events.
+var delegator = hg.Delegator();
+delegator.listenTo('dragenter');
+delegator.listenTo('dragleave');
+delegator.listenTo('drop');
+
+module.exports = BaseEvent(handleDrop); // jshint ignore:line
+
+// # var drop = require('./events/drop')
+//
+// Use as a drop event handler in virtual-dom using ev-event or ev-dragenter.
+//
+//     h('.drop-here', {
+//       'ev-event': drop(sink, data)
+//     })
+//
+// The drop handler will only broadcast on a successful drop and will send a
+// merged data object containing any dragged data added by any drag handlers.
+function handleDrop(ev, broadcast) {
+  // Only handle dragenter events, allows usage of ev-events for simplicity.
+  if (ev.type !== 'dragenter') {
+    return;
+  }
+
+  var element = ev.target;
+  var data = this.data;
+
+  delegator.listenTo('dragover');
+  delegator.addEventListener(element, 'dragover', dragover);
+  delegator.addEventListener(element, 'dragleave', dragleave);
+  delegator.addEventListener(element, 'drop', drop);
+
+  // Attached to the dragover event, this handler fires every few hundred ms.
+  // SEE: https://developer.mozilla.org/en-US/docs/Web/Events/dragover
+  function dragover(event) {
+    // Prevent default in order to allow/enable the drop event to fire.
+    event.preventDefault();
+  }
+
+  // Fires on on drop, will broadcast dropped data and detach all listeners.
+  // SEE: https://developer.mozilla.org/en-US/docs/Web/Events/drop
+  function drop(event) {
+    var raw = event._rawEvent;
+    var json = raw.dataTransfer.getData('application/json');
+    var dropped;
+
+    try {
+      dropped = JSON.parse(json);
+    } catch (e) {
+      throw new Error('Error parsing JSON "' + json + '"');
+    }
+
+    // Since the passed data is derived from application state it is given
+    // precedence over the dataTransfer.
+    broadcast(extend(dropped, data));
+    dragleave(event);
+  }
+
+  // Fired when dragging is no longer over the droptarget.
+  // SEE: https://developer.mozilla.org/en-US/docs/Web/Events/dragleave
+  function dragleave(event) {
+    delegator.unlistenTo('dragover');
+    delegator.removeEventListener(element, 'dragover', dragover);
+    delegator.removeEventListener(element, 'dragleave', dragleave);
+    delegator.removeEventListener(element, 'drop', drop);
+  }
+}
+
diff --git a/web/browser/events/droptarget.js b/web/browser/events/droptarget.js
deleted file mode 100644
index aa46035..0000000
--- a/web/browser/events/droptarget.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2015 The Vanadium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-var BaseEvent = require('mercury').BaseEvent;
-
-module.exports = BaseEvent(dropTargetHandler); // jshint ignore:line
-
-function dropTargetHandler(ev, broadcast) {
-  // Get the dataTransfer object out of the underlying event
-  var dt = ev._rawEvent.dataTransfer;
-
-  // Only fire this event if a Vanadium device is being dragged
-  if (dt.types.indexOf('application/vnd.vanadium.device') >= 0) {
-    ev.preventDefault();
-    broadcast(this.data);
-  }
-}
diff --git a/web/package.json b/web/package.json
index e8a8c4a..094463c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,7 +12,7 @@
   },
   "license": "BSD",
   "devDependencies": {
-    "browserify": "^11.0.1",
+    "browserify": "^12.0.1",
     "concat-stream": "^1.5.0",
     "dependency-check": "^2.5.1",
     "disc": "^1.3.2",