diff --git a/docs/src/demos/Examples/NodeView/Component.vue b/docs/src/demos/Examples/NodeView/Component.vue
index dfdadd50..dd3c814f 100644
--- a/docs/src/demos/Examples/NodeView/Component.vue
+++ b/docs/src/demos/Examples/NodeView/Component.vue
@@ -1,12 +1,13 @@
 <template>
-  <node-view-wrapper style="padding-left: 1rem">
-    <button @click="toggleChecked" contenteditable="false">
+  <node-view-wrapper class="item">
+    <!-- <button @click="toggleChecked" contenteditable="false">
       toggle checked
     </button>
     <div contenteditable="false">
       checked: {{ node.attrs.checked }}
-    </div>
-    <div contenteditable="false" style="width: 20px; height: 20px; background: red" data-drag-handle />
+    </div> -->
+
+    <div data-drag-handle class="drag-handle" contenteditable="false" />
     <node-view-content />
   </node-view-wrapper>
 </template>
@@ -53,3 +54,25 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.item {
+  padding: 0.5rem;
+  margin: 1rem 0;
+  border-radius: 0.5rem;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0px 10px 20px rgba(0, 0, 0, 0.1),
+  ;
+}
+
+.drag-handle {
+  width: 1rem;
+  height: 1rem;
+  cursor: grab;
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.4" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+</style>
diff --git a/docs/src/demos/Examples/NodeView/index.vue b/docs/src/demos/Examples/NodeView/index.vue
index c9cc7850..94910bf6 100644
--- a/docs/src/demos/Examples/NodeView/index.vue
+++ b/docs/src/demos/Examples/NodeView/index.vue
@@ -36,11 +36,14 @@ export default {
       content: `
         <p>paragraph</p>
         <div data-type="test">
-          one
+          <p>paragraph</p>
           <div data-type="test">
-            two
+            <p>paragraph</p>
           </div>
         </div>
+        <div data-type="test">
+          <p>paragraph</p>
+        </div>
         <p>paragraph</p>
       `,
       onUpdate: () => {
diff --git a/packages/vue/src/VueRenderer.ts b/packages/vue/src/VueRenderer.ts
index a5404494..160c7cec 100644
--- a/packages/vue/src/VueRenderer.ts
+++ b/packages/vue/src/VueRenderer.ts
@@ -63,7 +63,7 @@ class VueNodeView implements NodeView {
     })
   }
 
-  handleDragStart(event: Event) {
+  handleDragStart(event: DragEvent) {
     const { view } = this.editor
     const target = (event.target as HTMLElement)
 
@@ -71,6 +71,8 @@ class VueNodeView implements NodeView {
       return
     }
 
+    event.dataTransfer?.setDragImage(this.dom, 0, 0)
+
     const selection = NodeSelection.create(view.state.doc, this.getPos())
     const transaction = view.state.tr.setSelection(selection)