Add a header slot to limit the dragging area to the header and make the inner text selectable

[chinonnan]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch vue-drag-resize@2.0.3 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/vue-drag-resize/src/component/vue-drag-resize.html b/node_modules/vue-drag-resize/src/component/vue-drag-resize.html
index 9768032..34ed675 100644
--- a/node_modules/vue-drag-resize/src/component/vue-drag-resize.html
+++ b/node_modules/vue-drag-resize/src/component/vue-drag-resize.html
@@ -1,11 +1,14 @@
 <div class="vdr"
      :style="positionStyle"
      :class="`${(active || isActive) ? 'active' : 'inactive'} ${contentClass ? contentClass: ''}`"
-     @mousedown="bodyDown($event)"
-     @touchstart="bodyDown($event)"
-     @touchend="up($event)"
      ref="container"
      tabindex="0">
+     <div class="content-title" 
+          @mousedown="bodyDown($event)"
+          @touchstart="bodyDown($event)"
+          @touchend="up($event)">
+      <slot name="header"></slot>
+    </div>
     <div :style="sizeStyle" class="content-container" ref="container2">
         <slot></slot>
     </div>

This issue body was partially generated by patch-package.