Add ability to mark child element as draggable

By adding a class "draggable" to an element, user can mark it as
an area from which the dialog can be dragged.

Part of vaadin/vaadin-dialog-flow#165

src/vaadin-dialog-draggable-mixin.html

@@ -27,8 +27,9 @@
           const isResizerContainer = e.target === resizerContainer;
           const isResizerContainerScrollbar = e.offsetX > resizerContainer.clientWidth || e.offsetY > resizerContainer.clientHeight;
           const isContentPart = e.target === this.$.overlay.$.content;
-          if ((isResizerContainer && !isResizerContainerScrollbar) || isContentPart) {
-            e.preventDefault();
+          const isDraggable = e.target.classList.contains('draggable');
+          if ((isResizerContainer && !isResizerContainerScrollbar) || isContentPart || isDraggable) {
+            !isDraggable && e.preventDefault();
             this._originalBounds = this._getOverlayBounds();
             const event = this.__getMouseOrFirstTouchEvent(e);
             this._originalMouseCoords = {top: event.pageY, left: event.pageX};

src/vaadin-dialog.html

@@ -234,6 +234,10 @@
 
             /**
              * Set to true to enable repositioning the dialog by clicking and dragging.
+             *
+             * By default, only the overlay area can be used to drag the element. But,
+             * a child element can be marked as a draggable area by adding a
+             * "`draggable`" class to it.
              */
             draggable: {
               type: Boolean,

test/vaadin-dialog_draggable-resizable-test.html

@@ -57,6 +57,7 @@
       <vaadin-dialog draggable opened>
         <template>
           <div>Draggable dialog</div>
+          <div class="draggable">Draggable area</div>
           <button>OK</button>
         </template>
       </vaadin-dialog>
@@ -364,6 +365,13 @@
           expect(Math.floor(draggedBounds.left)).to.be.eql(Math.floor(bounds.left + dx));
         });
 
+        it('should drag and move dialog if mousedown on element with [class="draggable"]', () => {
+          drag(dialog.$.overlay.querySelector('.draggable'));
+          const draggedBounds = container.getBoundingClientRect();
+          expect(Math.floor(draggedBounds.top)).to.be.eql(Math.floor(bounds.top + dx));
+          expect(Math.floor(draggedBounds.left)).to.be.eql(Math.floor(bounds.left + dx));
+        });
+
         it('should drag and move dialog after resizing', () => {
           resize(container.querySelector('.s'), 0, dx);
           const bounds = container.getBoundingClientRect();