From 93de91327adca052e322c9a316555eb3792d1a61 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Wed, 28 Oct 2020 23:31:14 -0700
Subject: [PATCH] HTML5 removal into it's own h5 branch

* was a pain to release 2.x while working on HTML5 (3.x) so moved code to 'h5' branch
and reverted most changes in develop branch.
* will delete v2 branch as well.
---
 demo/h5dragdrop.html                | 128 -------------
 demo/index.html                     |   1 -
 src/dragdrop/dd-base-impl.ts        |  42 ----
 src/dragdrop/dd-draggable.ts        | 286 ----------------------------
 src/dragdrop/dd-droppable.ts        | 150 ---------------
 src/dragdrop/dd-element.ts          |  93 ---------
 src/dragdrop/dd-manager.ts          |  11 --
 src/dragdrop/dd-resizable-handle.ts | 110 -----------
 src/dragdrop/dd-resizable.ts        | 280 ---------------------------
 src/dragdrop/dd-utils.ts            |  87 ---------
 src/dragdrop/gridstack-dd-native.ts | 138 --------------
 src/gridstack.ts                    |   4 +
 src/index-html5.ts                  |  13 --
 src/index-jq.ts                     |  13 --
 src/index-static.ts                 |  11 --
 webpack.config.js                   |   7 +-
 16 files changed, 8 insertions(+), 1366 deletions(-)
 delete mode 100644 demo/h5dragdrop.html
 delete mode 100644 src/dragdrop/dd-base-impl.ts
 delete mode 100644 src/dragdrop/dd-draggable.ts
 delete mode 100644 src/dragdrop/dd-droppable.ts
 delete mode 100644 src/dragdrop/dd-element.ts
 delete mode 100644 src/dragdrop/dd-manager.ts
 delete mode 100644 src/dragdrop/dd-resizable-handle.ts
 delete mode 100644 src/dragdrop/dd-resizable.ts
 delete mode 100644 src/dragdrop/dd-utils.ts
 delete mode 100644 src/dragdrop/gridstack-dd-native.ts
 delete mode 100644 src/index-html5.ts
 delete mode 100644 src/index-jq.ts
 delete mode 100644 src/index-static.ts
diff --git a/demo/h5dragdrop.html b/demo/h5dragdrop.html
deleted file mode 100644
index 9de4b78e7..000000000
--- a/demo/h5dragdrop.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>HTML5 grid demo</title>
-
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-  <link rel="stylesheet" href="demo.css" />
-
-  <script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
-  <script nomodule="" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>
-
-  <script src="../dist/gridstack.html5.js"></script>
-
-  <style type="text/css">
-    .grid-stack-item-removing {
-      opacity: 0.8;
-      filter: blur(5px);
-    }
-
-    #trash {
-      background: rgba(255, 0, 0, 0.4);
-    }
-  </style>
-</head>
-
-<body>
-  <h1>Advanced HTML5 Demo</h1>
-  <div class="row">
-    <div class="col-md-2 d-none d-md-block">
-      <div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">
-        <div>
-          <ion-icon name="trash" style="font-size: 300%"></ion-icon>
-        </div>
-        <div>
-          <span>Drop here to remove!</span>
-        </div>
-      </div>
-      <div class="newWidget grid-stack-item">
-        <div class="grid-stack-item-content" style="padding: 5px;">
-          <div>
-            <ion-icon name="add-circle" style="font-size: 300%"></ion-icon>
-          </div>
-          <div>
-            <span>Drag me in the dashboard!</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="col-sm-12 col-md-10">
-      <div class="grid-stack" data-gs-animate="yes">
-        <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
-          <div class="grid-stack-item-content">1</div>
-        </div>
-        <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4"
-          data-gs-no-move="yes" data-gs-no-resize="yes" data-gs-locked="yes">
-          <div class="grid-stack-item-content">I can't be moved or dragged!
-            <br>
-            <ion-icon name="ios-lock" style="font-size:300%"></ion-icon>
-          </div>
-        </div>
-        <div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2"
-          data-gs-min-width="2" data-gs-no-resize="yes">
-          <div class="grid-stack-item-content" style="overflow: hidden">
-            <p class="card-text text-center" style="margin-bottom: 0">
-              Drag me!
-              <p class="card-text text-center" style="margin-bottom: 0">
-                <ion-icon name="hand" style="font-size: 300%"></ion-icon>
-                <p class="card-text text-center" style="margin-bottom: 0">
-                  ...but don't resize me!
-          </div>
-        </div>
-        <div class="grid-stack-item" data-gs-x="10" data-gs-y="0" data-gs-width="2" data-gs-height="2">
-          <div class="grid-stack-item-content"> 4</div>
-        </div>
-        <div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="2" data-gs-height="2">
-          <div class="grid-stack-item-content">5</div>
-        </div>
-        <div class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="2" data-gs-height="4">
-          <div class="grid-stack-item-content">6</div>
-        </div>
-        <div class="grid-stack-item" data-gs-x="8" data-gs-y="2" data-gs-width="4" data-gs-height="2">
-          <div class="grid-stack-item-content">7</div>
-        </div>
-        <div class="grid-stack-item" data-gs-x="0" data-gs-y="4" data-gs-width="2" data-gs-height="2">
-          <div class="grid-stack-item-content">8</div>
-        </div>
-        <div class="grid-stack-item" data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="2">
-          <div class="grid-stack-item-content">9</div>
-        </div>
-        <div class="grid-stack-item" data-gs-x="8" data-gs-y="4" data-gs-width="2" data-gs-height="2">
-          <div class="grid-stack-item-content">10</div>
-        </div>
-        <div class="grid-stack-item" data-gs-x="10" data-gs-y="4" data-gs-width="2" data-gs-height="2">
-          <div class="grid-stack-item-content">11</div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <script type="text/javascript">
-    let grid = GridStack.init({
-      alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-        navigator.userAgent
-      ),
-      resizable: {
-        autoHide: true,
-        handles: 'e, se, s, sw, w'
-      },
-      acceptWidgets: true,
-      dragIn: '.newWidget',  // class that can be dragged from outside
-      dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' },
-      removable: '#trash', // drag-out delete class
-      removeTimeout: 100
-    });
-
-    grid.on('added removed change', function(e, items) {
-      let str = '';
-      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
-      console.log(e.type + ' ' + items.length + ' items:' + str );
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 60e0ab898..49b9a5dac 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -8,7 +8,6 @@
   <h1>Demos</h1>
   <ul>
     <li><a href="advance.html">Advance</a></li>
-    <li><a href="h5dragdrop.html">Advance: use h5ddPlugin</a></li>
     <li><a href="anijs.html">AniJS</a></li>
     <li><a href="column.html">Column</a></li>
     <li><a href="float.html">Float grid</a></li>
diff --git a/src/dragdrop/dd-base-impl.ts b/src/dragdrop/dd-base-impl.ts
deleted file mode 100644
index aa751d18c..000000000
--- a/src/dragdrop/dd-base-impl.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-// dd-base-impl.ts 2.0.2-dev @preserve
-
-/**
- * https://gridstackjs.com/
- * (c) 2020 Alain Dumesny, rhlin
- * gridstack.js may be freely distributed under the MIT license.
-*/
-export type EventCallback = (event: Event) => boolean|void;
-export abstract class DDBaseImplement {
-  disabled = false;
-  private eventRegister: {
-    [eventName: string]: EventCallback;
-  } = {};
-  on(event: string, callback: EventCallback): void {
-    this.eventRegister[event] = callback;
-  }
-  off(event: string) {
-    delete this.eventRegister[event];
-  }
-  enable(): void {
-    this.disabled = false;
-  }
-  disable(): void {
-    this.disabled = true;
-  }
-  destroy() {
-    this.eventRegister = undefined;
-  }
-  triggerEvent(eventName: string, event: Event): boolean|void {
-    if (this.disabled) { return; }
-    if (!this.eventRegister) {return; } // used when destory before triggerEvent fire
-    if (this.eventRegister[eventName]) {
-      return this.eventRegister[eventName](event);
-    }
-  }
-}
-
-export interface HTMLElementExtendOpt<T> {
-  el: HTMLElement;
-  option: T;
-  updateOption(T): void;
-}
diff --git a/src/dragdrop/dd-draggable.ts b/src/dragdrop/dd-draggable.ts
deleted file mode 100644
index 8ac438699..000000000
--- a/src/dragdrop/dd-draggable.ts
+++ /dev/null
@@ -1,286 +0,0 @@
-// dd-draggable.ts 2.0.2-dev @preserve
-
-/**
- * https://gridstackjs.com/
- * (c) 2020 Alain Dumesny, rhlin
- * gridstack.js may be freely distributed under the MIT license.
-*/
-import { DDManager } from './dd-manager';
-import { DDUtils } from './dd-utils';
-import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
-
-export interface DDDraggbleOpt {
-  appendTo?: string | HTMLElement;
-  containment?: string | HTMLElement;
-  handle?: string;
-  revert?: string | boolean | unknown; // TODO: not impleament yet
-  scroll?: boolean; // nature support by HTML5 drag drop, can't be switch to off actually
-  helper?: string | ((event: Event) => HTMLElement);
-  start?: (event?, ui?) => void;
-  stop?: (event?, ui?) => void;
-  drag?: (event?, ui?) => void;
-};
-export class DDDraggble extends DDBaseImplement implements HTMLElementExtendOpt<DDDraggbleOpt> {
-  static originStyleProp = ['transition','pointerEvents', 'position',
-    'left', 'top', 'opacity', 'zIndex', 'width', 'height'];
-  el: HTMLElement;
-  helper: HTMLElement;
-  option: DDDraggbleOpt;
-  dragOffset;
-  dragElementOriginStyle;
-  dragFollowTimer;
-  mouseDownElement: HTMLElement;
-  dragging = false;
-
-  constructor(el: HTMLElement, option: DDDraggbleOpt) {
-    super();
-    this.el = el;
-    this.option = option || {};
-    this.init();
-  }
-
-  on(event: 'drag' | 'dragstart' | 'dragstop', callback: (event: DragEvent) => void): void {
-    super.on(event, callback);
-  }
-
-  off(event: 'drag' | 'dragstart' | 'dragstop') {
-    super.off(event);
-  }
-
-  enable() {
-    super.enable();
-    this.el.draggable = true;
-    this.el.classList.remove('ui-draggable-disabled');
-  }
-
-  disable() {
-    super.disable();
-    this.el.draggable = false;
-    this.el.classList.add('ui-draggable-disabled');
-  }
-
-  updateOption(opts) {
-    Object.keys(opts).forEach(key => {
-      const value = opts[key];
-      this.option[key] = value;
-    });
-  }
-
-  protected init() {
-    this.el.draggable = true;
-    this.el.classList.add('ui-draggable');
-    this.el.addEventListener('mousedown', this.mouseDown);
-    this.el.addEventListener('dragstart', this.dragStart);
-    this.el.addEventListener('dragend', this.dragEnd);
-    this.dragThrottle = DDUtils.throttle(this.drag, 100);
-  }
-
-  protected mouseDown = (event: MouseEvent) => {
-    this.mouseDownElement = event.target as HTMLElement;
-  }
-
-  protected dragStart = (event: DragEvent) => {
-    if (this.option.handle && !(
-      this.mouseDownElement
-      && this.mouseDownElement.matches(
-        `${this.option.handle}, ${this.option.handle} > *`
-      )
-    )) {
-      event.preventDefault();
-      return;
-    }
-    DDManager.dragElement = this;
-    this.helper = this.createHelper(event);
-    this.dragOffset = this.getDragOffset(event, this.el, this.helper.parentElement);
-    const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'dragstart' });
-    if (this.helper !== this.el) {
-      this.setupDragFollowNodeNNotifyStart(ev);
-    } else {
-      this.dragFollowTimer = setTimeout(() => {
-        this.dragFollowTimer = undefined;
-        this.setupDragFollowNodeNNotifyStart(ev);
-      }, 0);
-    }
-    this.cancelDragGhost(event);
-  }
-
-  protected setupDragFollowNodeNNotifyStart(ev) {
-    this.setupHelperStyle();
-    document.addEventListener('dragover', this.dragThrottle, true);
-    if (this.option.start) {
-      this.option.start(ev, this.ui());
-    }
-    this.triggerEvent('dragstart', ev);
-    this.dragging = true;
-    this.el.classList.add('ui-draggable-dragging');
-  }
-
-  protected dragThrottle: (event: DragEvent) => void;
-  protected drag = (event: DragEvent) => {
-    this.dragFollow(event);
-    const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'drag' });
-    if (this.option.drag) {
-      this.option.drag(ev, this.ui());
-    }
-    this.triggerEvent('drag', ev);
-  }
-
-  protected dragEnd = (event: DragEvent) => {
-    if (this.dragFollowTimer) {
-      clearTimeout(this.dragFollowTimer);
-      this.dragFollowTimer = undefined;
-      return;
-    } else {
-      document.removeEventListener('dragover', this.dragThrottle, true);
-    }
-    this.dragging = false;
-    this.el.classList.remove('ui-draggable-dragging');
-    if (this.helper === this.el) {
-      this.removeHelperStyle();
-    } else {
-      this.helper.remove();
-    }
-    const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'dragstop' });
-    if (this.option.stop) {
-      this.option.stop(ev, this.ui())
-    }
-    this.triggerEvent('dragstop', ev);
-    DDManager.dragElement = undefined;
-    this.helper = undefined;
-    this.mouseDownElement = undefined;
-  }
-
-  private createHelper(event: DragEvent) {
-    const helperIsFunction = (typeof this.option.helper) === 'function';
-    const helper = (helperIsFunction
-      ? (this.option.helper as ((event: Event) => HTMLElement)).apply(this.el, [event])
-      : (this.option.helper === "clone" ? DDUtils.clone(this.el) : this.el)
-    ) as HTMLElement;
-    if (!document.body.contains(helper)) {
-      DDUtils.appendTo(helper, (this.option.appendTo === "parent"
-        ? this.el.parentNode
-        : this.option.appendTo));
-    }
-    if (helper === this.el) {
-      this.dragElementOriginStyle = DDDraggble.originStyleProp.map(prop => this.el.style[prop]);
-    }
-    return helper;
-  }
-
-  private setupHelperStyle() {
-    this.helper.style.pointerEvents = 'none';
-    this.helper.style.width = this.dragOffset.width + 'px';
-    this.helper.style.height = this.dragOffset.height + 'px';
-    this.helper.style.transition = 'none'; // show up instancely
-    this.helper.style.position = 'fixed';
-    this.helper.style.zIndex = '1000';
-    // won't be neccessary
-    // this.helper.style.opacity = '0.8';
-    setTimeout(()=>{
-      this.helper.style.transition = null; // recover animation
-    }, 100);
-  }
-
-  private removeHelperStyle() {
-    DDDraggble.originStyleProp.forEach(prop => {
-      this.helper.style[prop] = this.dragElementOriginStyle[prop] || null;
-    });
-    this.dragElementOriginStyle = undefined;
-  }
-
-  private dragFollow = (event: DragEvent) => {
-    const offset = this.dragOffset;
-    this.helper.style.left = event.clientX + offset.offsetLeft + 'px';
-    this.helper.style.top = event.clientY + offset.offsetTop + 'px';
-  }
-
-  private cancelDragGhost(e: DragEvent) {
-    if (e.dataTransfer != null) {
-      e.dataTransfer.setData('text', '');
-    }
-    e.dataTransfer.effectAllowed = 'move';
-    if ('function' === typeof DataTransfer.prototype.setDragImage) {
-      e.dataTransfer.setDragImage(new Image(), 0, 0);
-    } else {
-      // ie
-      (e.target as HTMLElement).style.display = 'none';
-      setTimeout(() => {
-        (e.target as HTMLElement).style.display = '';
-      });
-      e.stopPropagation();
-      return;
-    }
-    e.stopPropagation();
-  }
-
-  private getDragOffset(event: DragEvent, el: HTMLElement, attachedParent: HTMLElement) {
-    // in case ancestor has transform/perspective css properies that change the viewpoint
-    const getViewPointFromParent = (parent) => {
-      if (!parent) { return null; }
-      const testEl = document.createElement('div');
-      DDUtils.addElStyles(testEl, {
-        opacity: '0',
-        position: 'fixed',
-        top: 0 + 'px',
-        left: 0 + 'px',
-        width: '1px',
-        height: '1px',
-        zIndex: '-999999',
-      });
-      parent.appendChild(testEl);
-      const testElPosition = testEl.getBoundingClientRect();
-      parent.removeChild(testEl);
-      return {
-        offsetX: testElPosition.left,
-        offsetY: testElPosition.top
-      };
-    }
-    const targetOffset = el.getBoundingClientRect();
-    const mousePositionXY = {
-      x: event.clientX,
-      y: event.clientY
-    };
-    const transformOffset = getViewPointFromParent(attachedParent);
-    return {
-      left: targetOffset.left,
-      top: targetOffset.top,
-      offsetLeft: - mousePositionXY.x + targetOffset.left - transformOffset.offsetX,
-      offsetTop: - mousePositionXY.y + targetOffset.top - transformOffset.offsetY,
-      width: targetOffset.width,
-      height: targetOffset.height
-    };
-  }
-  destroy() {
-    if (this.dragging) {
-      // Destroy while draggging should remove dragend listener and manally trigger
-      // dragend, otherwise dragEnd can't perform dragstop becasue eventResistry is
-      // destoryed.
-      this.el.removeEventListener('dragend', this.dragEnd);
-      this.dragEnd({} as DragEvent);
-    }
-    this.el.draggable = false;
-    this.el.classList.remove('ui-draggable');
-    this.el.removeEventListener('dragstart', this.dragStart);
-    this.el.removeEventListener('dragend', this.dragEnd);
-    this.el = undefined;
-    this.helper = undefined;
-    this.option = undefined;
-    super.destroy();
-  }
-
-  ui = () => {
-    const containmentEl = this.el.parentElement;
-    const containmentRect = containmentEl.getBoundingClientRect();
-    const offset = this.helper.getBoundingClientRect();
-    return {
-      helper: [this.helper], //The object arr representing the helper that's being dragged.
-      position: {
-        top: offset.top - containmentRect.top,
-        left: offset.left - containmentRect.left
-      }, //Current CSS position of the helper as { top, left } object
-      offset: { top: offset.top, left: offset.left }// Current offset position of the helper as { top, left } object.
-    };
-  }
-}
-
-
diff --git a/src/dragdrop/dd-droppable.ts b/src/dragdrop/dd-droppable.ts
deleted file mode 100644
index 908b179af..000000000
--- a/src/dragdrop/dd-droppable.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-// dd-droppable.ts 2.0.2-dev @preserve
-
-/**
- * https://gridstackjs.com/
- * (c) 2020 Alain Dumesny, rhlin
- * gridstack.js may be freely distributed under the MIT license.
-*/
-import { DDDraggble } from './dd-draggable';
-import { DDManager } from './dd-manager';
-import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
-import { DDUtils } from './dd-utils';
-
-export interface DDDropableOpt {
-  accept?: string | ((el: HTMLElement) => boolean);
-  drop?: (event: DragEvent, ui) => void;
-  over?: (event: DragEvent, ui) => void;
-  out?: (event: DragEvent, ui) => void;
-};
-export class DDDropable extends DDBaseImplement implements HTMLElementExtendOpt<DDDropableOpt> {
-  el: HTMLElement;
-  option: DDDropableOpt;
-  private count = 0;
-  private dragEl: HTMLElement;
-  constructor(el: HTMLElement, opts: DDDropableOpt) {
-    super();
-    this.el = el;
-    this.option = opts || {};
-    this.init();
-  }
-  on(event: 'drop' | 'dropover' | 'dropout', callback: (event: DragEvent) => void): void {
-    super.on(event, callback);
-  }
-  off(event: 'drop' | 'dropover' | 'dropout') {
-    super.off(event);
-  }
-  enable() {
-    if (!this.disabled) { return; }
-    super.enable();
-    this.el.classList.remove('ui-droppable-disabled');
-    this.el.addEventListener('dragenter', this.dragEnter);
-    this.el.addEventListener('dragover', this.dragOver);
-    this.el.addEventListener('drop', this.drop);
-    this.el.addEventListener('dragleave', this.dragLeave);
-  }
-  disable() {
-    if (this.disabled) { return; }
-    super.disable();
-    this.el.classList.add('ui-droppable-disabled');
-    this.el.removeEventListener('dragenter', this.dragEnter);
-    this.el.removeEventListener('dragover', this.dragOver);
-    this.el.removeEventListener('drop', this.drop);
-    this.el.removeEventListener('dragleave', this.dragLeave);
-  }
-  updateOption(opts) {
-    Object.keys(opts).forEach(key => {
-      const value = opts[key];
-      this.option[key] = value;
-    });
-  }
-
-  protected init() {
-    this.el.classList.add('ui-droppable');
-    this.el.addEventListener('dragenter', this.dragEnter);
-    this.el.addEventListener('dragover', this.dragOver);
-    this.el.addEventListener('drop', this.drop);
-    this.el.addEventListener('dragleave', this.dragLeave);
-  }
-
-  protected dragEnter = (event: DragEvent) => {
-    if (this.canDrop()) {
-      if (0 === this.count) {
-        this.dragEl = DDManager.dragElement.el;
-        this.dragEl.addEventListener('dragend', this.resetCount);
-        const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'dropover' });
-        if (this.option.over) {
-          this.option.over(ev, this.ui(DDManager.dragElement))
-        }
-        this.triggerEvent('dropover', ev);
-        event.preventDefault();
-      }
-    }
-    this.count++;
-  }
-  protected dragOver = (event: DragEvent) => {
-    if (this.canDrop()) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  }
-  protected dragLeave = (event: DragEvent) => {
-    this.count--;
-    if (this.canDrop()) {
-      if (0 === this.count) {
-        const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'dropout' });
-        if (this.option.out) {
-          this.option.out(ev, this.ui(DDManager.dragElement))
-        }
-        this.triggerEvent('dropout', ev);
-      }
-      event.preventDefault();
-    }
-  }
-  protected drop = (event: DragEvent) => {
-    if (this.canDrop()) {
-      const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'drop' });
-      if (this.option.drop) {
-        this.option.drop(ev, this.ui(DDManager.dragElement))
-      }
-      this.triggerEvent('drop', ev);
-      event.preventDefault();
-      this.count = 0;
-    }
-  }
-  private resetCount = () => {
-    this.count = 0;
-    this.dragEl.removeEventListener('dragend', this.resetCount);
-    this.dragEl = undefined;
-  }
-  private canDrop() {
-    let accept;
-    if (this.option.accept && typeof this.option.accept === 'string') {
-      accept = (el: HTMLElement) => {
-        return el.matches(this.option.accept as string)
-      }
-    } else {
-      accept = this.option.accept as ((el: HTMLElement) => boolean);
-    }
-    return DDManager.dragElement && (!accept || accept(DDManager.dragElement.el));
-  }
-
-  destroy() {
-    this.el.classList.remove('ui-droppable');
-    if (this.disabled) {
-      this.el.classList.remove('ui-droppable-disabled');
-      this.el.removeEventListener('dragenter', this.dragEnter);
-      this.el.removeEventListener('dragover', this.dragOver);
-      this.el.removeEventListener('drop', this.drop);
-      this.el.removeEventListener('dragleave', this.dragLeave);
-    }
-    super.destroy();
-  }
-
-  ui(ddDraggble: DDDraggble) {
-    return {
-      draggable: ddDraggble.el,
-      ...ddDraggble.ui()
-    };
-  }
-}
-
diff --git a/src/dragdrop/dd-element.ts b/src/dragdrop/dd-element.ts
deleted file mode 100644
index 4f54aecff..000000000
--- a/src/dragdrop/dd-element.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-// dd-elements.ts 2.0.2-dev @preserve
-
-/**
- * https://gridstackjs.com/
- * (c) 2020 Alain Dumesny, rhlin
- * gridstack.js may be freely distributed under the MIT license.
-*/
-import { DDResizable, DDResizableOpt } from './dd-resizable';
-import { GridItemHTMLElement } from './../types';
-import { DDDraggble, DDDraggbleOpt } from './dd-draggable';
-import { DDDropable, DDDropableOpt } from './dd-droppable';
-export interface DDElementHost extends GridItemHTMLElement {
-  ddElement?: DDElement;
-}
-export class DDElement {
-  static init(el) {
-    el.ddElement = new DDElement(el);
-    return el.ddElement;
-  }
-  el: DDElementHost;
-  ddDraggable?: DDDraggble;
-  ddDroppable?: DDDropable;
-  ddResizable?: DDResizable;
-  constructor(el: DDElementHost) {
-    this.el = el;
-  }
-  on(eventName: string, callback: (event: MouseEvent) => void) {
-    if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {
-      this.ddDraggable.on(eventName as 'drag' | 'dragstart' | 'dragstop', callback);
-      return;
-    }
-    if (this.ddDroppable && ['drop', 'dropover', 'dropout'].indexOf(eventName) > -1) {
-      this.ddDroppable.on(eventName as 'drop' | 'dropover' | 'dropout', callback);
-      return;
-    }
-    if (this.ddResizable && ['resizestart', 'resize', 'resizestop'].indexOf(eventName) > -1) {
-      this.ddResizable.on(eventName as 'resizestart' | 'resize' | 'resizestop', callback);
-      return;
-    }
-    return;
-  }
-  off(eventName: string) {
-    if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {
-      this.ddDraggable.off(eventName as 'drag' | 'dragstart' | 'dragstop');
-      return;
-    }
-    if (this.ddDroppable && ['drop', 'dropover', 'dropout'].indexOf(eventName) > -1) {
-      this.ddDroppable.off(eventName as 'drop' | 'dropover' | 'dropout');
-      return;
-    }
-    if (this.ddResizable && ['resizestart', 'resize', 'resizestop'].indexOf(eventName) > -1) {
-      this.ddResizable.off(eventName as 'resizestart' | 'resize' | 'resizestop');
-      return;
-    }
-    return;
-  }
-  setupDraggable(opts: DDDraggbleOpt) {
-    if (!this.ddDraggable) {
-      this.ddDraggable = new DDDraggble(this.el, opts);
-    } else {
-      this.ddDraggable.updateOption(opts);
-    }
-  }
-  setupResizable(opts: DDResizableOpt) {
-    if (!this.ddResizable) {
-      this.ddResizable = new DDResizable(this.el, opts);
-    } else {
-      this.ddResizable.updateOption(opts);
-    }
-  }
-  cleanDraggable() {
-    if (!this.ddDraggable) { return; }
-    this.ddDraggable.destroy();
-    this.ddDraggable = undefined;
-  }
-  setupDroppable(opts: DDDropableOpt) {
-    if (!this.ddDroppable) {
-      this.ddDroppable = new DDDropable(this.el, opts);
-    } else {
-      this.ddDroppable.updateOption(opts);
-    }
-  }
-  cleanDroppable() {
-    if (!this.ddDroppable) { return; }
-    this.ddDroppable.destroy();
-    this.ddDroppable = undefined;
-  }
-  cleanResizable() {
-    if (!this.cleanResizable) { return; }
-    this.ddResizable.destroy();
-    this.ddResizable = undefined;
-  }
-}
diff --git a/src/dragdrop/dd-manager.ts b/src/dragdrop/dd-manager.ts
deleted file mode 100644
index 6fb546326..000000000
--- a/src/dragdrop/dd-manager.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// dd-manager.ts 2.0.2-dev @preserve
-
-/**
- * https://gridstackjs.com/
- * (c) 2020 Alain Dumesny, rhlin
- * gridstack.js may be freely distributed under the MIT license.
-*/
-import { DDDraggble } from './dd-draggable';
-export class DDManager {
-  static dragElement: DDDraggble;
-}
diff --git a/src/dragdrop/dd-resizable-handle.ts b/src/dragdrop/dd-resizable-handle.ts
deleted file mode 100644
index 513978266..000000000
--- a/src/dragdrop/dd-resizable-handle.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-// dd-resizable-handle.ts 2.0.2-dev @preserve
-
-/**
- * https://gridstackjs.com/
- * (c) 2020 Alain Dumesny, rhlin
- * gridstack.js may be freely distributed under the MIT license.
-*/
-import { DDUtils } from "./dd-utils";
-
-export interface DDResizableHandleOpt {
-  start?: (event) => void;
-  move?: (event) => void;
-  stop?: (event) => void;
-}
-export class DDResizableHandle {
-  static prefix = 'ui-resizable-';
-  el: HTMLElement;
-  host: HTMLElement;
-  option: DDResizableHandleOpt;
-  dir: string;
-  private mouseMoving = false;
-  private started = false;
-  private mouseDownEvent: MouseEvent;
-  constructor(host: HTMLElement, direction: string, option: DDResizableHandleOpt) {
-    this.host = host;
-    this.dir = direction;
-    this.option = option;
-    this.init();
-  }
-
-  init() {
-    const el = document.createElement('div');
-    el.classList.add('ui-resizable-handle');
-    el.classList.add(`${DDResizableHandle.prefix}${this.dir}`);
-    el.style.zIndex = '100';
-    el.style.userSelect = 'none';
-    this.el = el;
-    this.host.appendChild(this.el);
-    this.el.addEventListener('mousedown', this.mouseDown);
-    this.mouseMoveThrottle = DDUtils.throttle(this.mouseMove, 100);
-  }
-
-  protected mouseDown = (event: MouseEvent) => {
-    this.mouseDownEvent = event;
-    setTimeout(() => {
-      document.addEventListener('mousemove', this.mouseMoveThrottle, true);
-      document.addEventListener('mouseup', this.mouseUp);
-      setTimeout(() => {
-        if (!this.mouseMoving) {
-          document.removeEventListener('mousemove', this.mouseMoveThrottle, true);
-          document.removeEventListener('mouseup', this.mouseUp);
-          this.mouseDownEvent = undefined;
-        }
-      }, 300);
-    }, 100);
-  }
-
-  protected mouseMoveThrottle: (event: MouseEvent) => void;
-  protected mouseMove = (event: MouseEvent) => {
-    if (!this.started && !this.mouseMoving) {
-      if (this.hasMoved(event, this.mouseDownEvent)) {
-        this.mouseMoving = true;
-        this.triggleEvent('start', this.mouseDownEvent);
-        this.started = true;
-      }
-    }
-    if (this.started) {
-      this.triggleEvent('move', event);
-    }
-  }
-
-  protected mouseUp = (event: MouseEvent) => {
-    if (this.mouseMoving) {
-      this.triggleEvent('stop', event);
-    }
-    document.removeEventListener('mousemove', this.mouseMoveThrottle, true);
-    document.removeEventListener('mouseup', this.mouseUp);
-    this.mouseMoving = false;
-    this.started = false;
-    this.mouseDownEvent = undefined;
-  }
-
-  private hasMoved(event: MouseEvent, oEvent: MouseEvent) {
-    const { clientX, clientY } = event;
-    const { clientX: oClientX, clientY: oClientY } = oEvent;
-    return (
-      Math.abs(clientX - oClientX) > 1
-      || Math.abs(clientY - oClientY) > 1
-    );
-  }
-
-  show() {
-    this.el.style.display = 'block';
-  }
-
-  hide() {
-    this.el.style.display = 'none';
-  }
-
-  destory() {
-    this.host.removeChild(this.el);
-  }
-
-  triggleEvent(name: string, event: MouseEvent) {
-    if (this.option[name]) {
-      this.option[name](event);
-    }
-  }
-
-}
diff --git a/src/dragdrop/dd-resizable.ts b/src/dragdrop/dd-resizable.ts
deleted file mode 100644
index d07558d16..000000000
--- a/src/dragdrop/dd-resizable.ts
+++ /dev/null
@@ -1,280 +0,0 @@
-// dd-resizable.ts 2.0.2-dev @preserve
-
-/**
- * https://gridstackjs.com/
- * (c) 2020 Alain Dumesny, rhlin
- * gridstack.js may be freely distributed under the MIT license.
-*/
-import { DDResizableHandle } from './dd-resizable-handle';
-import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
-import { DDUtils } from './dd-utils';
-export interface DDResizableOpt {
-  autoHide?: boolean;
-  handles?: string;
-  maxHeight?: number;
-  maxWidth?: number;
-  minHeight?: number;
-  minWidth?: number;
-  basePosision?: 'fixed' | 'absolute';
-  start?: (event: MouseEvent, ui) => void;
-  stop?: (event: MouseEvent, ui) => void;
-  resize?: (event: MouseEvent, ui) => void;
-}
-export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt<DDResizableOpt> {
-  static originStyleProp = ['width', 'height', 'position', 'left', 'top', 'opacity', 'zIndex'];
-  el: HTMLElement;
-  option: DDResizableOpt;
-  handlers: DDResizableHandle[];
-  helper: HTMLElement;
-  originalRect;
-  temporalRect;
-  private startEvent: MouseEvent;
-  private elOriginStyle;
-  private parentOriginStylePosition;
-  constructor(el: HTMLElement, opts: DDResizableOpt) {
-    super();
-    this.el = el;
-    this.option = opts || {};
-    this.init();
-  }
-  on(event: 'resizestart' | 'resize' | 'resizestop', callback: (event: DragEvent) => void): void {
-    super.on(event, callback);
-  }
-  off(event: 'resizestart' | 'resize' | 'resizestop') {
-    super.off(event);
-  }
-  enable() {
-    if (!this.disabled) { return; }
-    super.enable();
-    this.el.classList.remove('ui-resizable-disabled');
-  }
-  disable() {
-    if (this.disabled) { return; }
-    super.disable();
-    this.el.classList.add('ui-resizable-disabled');
-  }
-  updateOption(opts: DDResizableOpt) {
-    let updateHandles = false;
-    let updateAutoHide = false;
-    if (opts.handles !== this.option.handles) {
-      updateHandles = true;
-    }
-    if (opts.autoHide !== this.option.autoHide) {
-      updateAutoHide = true;
-    }
-    Object.keys(opts).forEach(key => {
-      const value = opts[key];
-      this.option[key] = value;
-    });
-    if (updateHandles) {
-      this.removeHandlers();
-      this.setupHandlers();
-    }
-    if (updateAutoHide) {
-      this.setupAutoHide();
-    }
-  }
-
-  protected init() {
-    this.el.classList.add('ui-resizable');
-    this.setupAutoHide();
-    this.setupHandlers();
-  }
-
-  protected setupAutoHide() {
-    if (this.option.autoHide) {
-      this.el.classList.add('ui-resizable-autohide');
-      this.el.addEventListener('mouseenter', this.showHandlers);
-      this.el.addEventListener('mouseleave', this.hideHandlers);
-    } else {
-      this.el.classList.remove('ui-resizable-autohide');
-      this.el.removeEventListener('mouseenter', this.showHandlers);
-      this.el.removeEventListener('mouseleave', this.hideHandlers);
-    }
-  }
-
-  protected showHandlers = () => {
-    this.el.classList.remove('ui-resizable-autohide');
-  }
-
-  protected hideHandlers = () => {
-    this.el.classList.add('ui-resizable-autohide');
-  }
-
-  protected setupHandlers() {
-    let handlerDirection = this.option.handles || 'e,s,se';
-    if (handlerDirection === 'all') {
-      handlerDirection = 'n,e,s,w,se,sw,ne,nw';
-    }
-    this.handlers = handlerDirection.split(',')
-      .map(dir => dir.trim())
-      .map(dir => new DDResizableHandle(this.el, dir, {
-        start: (event: MouseEvent) => {
-          this.resizeStart(event);
-        },
-        stop: (event: MouseEvent) => {
-          this.resizeStop(event);
-        },
-        move: (event: MouseEvent) => {
-          this.resizing(event, dir);
-        }
-      }));
-  }
-
-  protected resizeStart(event: MouseEvent) {
-    this.originalRect = this.el.getBoundingClientRect();
-    this.startEvent = event;
-    this.setupHelper();
-    this.applyChange();
-    const ev = DDUtils.initEvent<MouseEvent>(event, { type: 'resizestart', target: this.el });
-    if (this.option.start) {
-      this.option.start(ev, this.ui());
-    }
-    this.triggerEvent('resizestart', ev);
-  }
-
-  protected resizing(event: MouseEvent, dir: string) {
-    this.temporalRect = this.getChange(event, dir);
-    this.applyChange();
-    const ev = DDUtils.initEvent<MouseEvent>(event, { type: 'resize', target: this.el });
-    if (this.option.resize) {
-      this.option.resize(ev, this.ui());
-    }
-    this.triggerEvent('resize', ev);
-  }
-
-  protected resizeStop(event: MouseEvent) {
-    const ev = DDUtils.initEvent<MouseEvent>(event, { type: 'resizestop', target: this.el });
-    if (this.option.stop) {
-      this.option.stop(ev, this.ui());
-    }
-    this.triggerEvent('resizestop', ev);
-    this.cleanHelper();
-    this.startEvent = undefined;
-    this.originalRect = undefined;
-    this.temporalRect = undefined;
-  }
-
-  private setupHelper() {
-    this.elOriginStyle = DDResizable.originStyleProp.map(prop => this.el.style[prop]);
-    this.parentOriginStylePosition = this.el.parentElement.style.position;
-    if (window.getComputedStyle(this.el.parentElement).position.match(/static/)) {
-      this.el.parentElement.style.position = 'relative';
-    }
-    this.el.style.position = this.option.basePosision || 'absolute'; // or 'fixed'
-    this.el.style.opacity = '0.8';
-    this.el.style.zIndex = '1000';
-  }
-  private cleanHelper() {
-    DDResizable.originStyleProp.forEach(prop => {
-      this.el.style[prop] = this.elOriginStyle[prop] || null;
-    });
-    this.el.parentElement.style.position = this.parentOriginStylePosition || null;
-  }
-  private getChange(event: MouseEvent, dir: string) {
-    const oEvent = this.startEvent;
-    const newRect = {
-      width: this.originalRect.width,
-      height: this.originalRect.height,
-      left: this.originalRect.left,
-      top: this.originalRect.top
-    };
-    const offsetH = event.clientX - oEvent.clientX;
-    const offsetV = event.clientY - oEvent.clientY;
-
-    if (dir.indexOf('e') > -1) {
-      newRect.width += event.clientX - oEvent.clientX;
-    }
-    if (dir.indexOf('s') > -1) {
-      newRect.height += event.clientY - oEvent.clientY;
-    }
-    if (dir.indexOf('w') > -1) {
-      newRect.width -= offsetH;
-      newRect.left += offsetH;
-    }
-    if (dir.indexOf('n') > -1) {
-      newRect.height -= offsetV;
-      newRect.top += offsetV
-    }
-    const reshape = this.getReShapeSize(newRect.width, newRect.height);
-    if (newRect.width !== reshape.width) {
-      if (dir.indexOf('w') > -1) {
-        newRect.left += reshape.width - newRect.width;
-      }
-      newRect.width = reshape.width;
-    }
-    if (newRect.height !== reshape.height) {
-      if (dir.indexOf('n') > -1) {
-        newRect.top += reshape.height - newRect.height;
-      }
-      newRect.height = reshape.height;
-    }
-    return newRect;
-  }
-
-  private getReShapeSize(oWidth, oHeight) {
-    const maxWidth = this.option.maxWidth || oWidth;
-    const minWidth = this.option.minWidth || oWidth;
-    const maxHeight = this.option.maxHeight || oHeight;
-    const minHeight = this.option.minHeight || oHeight;
-    const width = Math.min(maxWidth, Math.max(minWidth, oWidth));
-    const height = Math.min(maxHeight, Math.max(minHeight, oHeight));
-    return { width, height };
-  }
-
-  private applyChange() {
-    let containmentRect = { left: 0, top: 0, width: 0, height: 0 };
-    if (this.el.style.position === 'absolute') {
-      const containmentEl = this.el.parentElement;
-      const { left, top } = containmentEl.getBoundingClientRect();
-      containmentRect = { left, top, width: 0, height: 0 };
-    }
-    Object.keys(this.temporalRect || this.originalRect).forEach(key => {
-      const value = this.temporalRect[key];
-      this.el.style[key] = value - containmentRect[key] + 'px';
-    });
-  }
-
-  protected removeHandlers() {
-    this.handlers.forEach(handle => handle.destory());
-    this.handlers = undefined;
-  }
-
-  destory() {
-    this.removeHandlers();
-    if (this.option.autoHide) {
-      this.el.removeEventListener('mouseenter', this.showHandlers);
-      this.el.removeEventListener('mouseleave', this.hideHandlers);
-    }
-    this.el.classList.remove('ui-resizable');
-    this.el = undefined;
-    super.destroy();
-  }
-
-  ui = () => {
-    const containmentEl = this.el.parentElement;
-    const containmentRect = containmentEl.getBoundingClientRect();
-    const rect = this.temporalRect || this.originalRect;
-    return {
-      element: [this.el], // The object representing the element to be resized
-      helper: [], // TODO: not support yet // The object representing the helper that's being resized
-      originalElement: [this.el],// we dont wrap here, so simplify as this.el //The object representing the original element before it is wrapped
-      originalPosition: {
-        left: this.originalRect.left - containmentRect.left,
-        top: this.originalRect.top - containmentRect.top
-      }, // The position represented as { left, top } before the resizable is resized
-      originalSize: {
-        width: this.originalRect.width,
-        height: this.originalRect.height
-      },// The size represented as { width, height } before the resizable is resized
-      position: {
-        left: rect.left - containmentRect.left,
-        top: rect.top - containmentRect.top
-      }, // The current position represented as { left, top }
-      size: {
-        width: rect.width,
-        height: rect.height
-      } // The current size represented as { width, height }
-    };
-  }
-}
diff --git a/src/dragdrop/dd-utils.ts b/src/dragdrop/dd-utils.ts
deleted file mode 100644
index e9a6e4788..000000000
--- a/src/dragdrop/dd-utils.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-// dd-utils.ts 2.0.2-dev @preserve
-
-/**
- * https://gridstackjs.com/
- * (c) 2020 Alain Dumesny, rhlin
- * gridstack.js may be freely distributed under the MIT license.
-*/
-export class DDUtils {
-  static clone(el: HTMLElement): HTMLElement {
-    const node = el.cloneNode(true) as HTMLElement;
-    node.removeAttribute('id');
-    return node;
-  }
-
-  static appendTo(el: HTMLElement, parent: string | HTMLElement | Node) {
-    let parentNode: HTMLElement;
-    if (typeof parent === 'string') {
-      parentNode = document.querySelector(parent as string);
-    } else {
-      parentNode = parent as HTMLElement;
-    }
-    if (parentNode) {
-      parentNode.append(el);
-    }
-  }
-  static setPositionRelative(el) {
-    if (!(/^(?:r|a|f)/).test(window.getComputedStyle(el).position)) {
-      el.style.position = "relative";
-    }
-  }
-
-  static throttle(callback: (...args) => void, delay: number) {
-    let isWaiting = false;
-
-    return (...args) => {
-      if (!isWaiting) {
-        callback(...args);
-        isWaiting = true;
-        setTimeout(() => isWaiting = false, delay);
-      }
-    }
-  }
-  static addElStyles(el: HTMLElement, styles: { [prop: string]: string | string[] }) {
-    if (styles instanceof Object) {
-      for (const s in styles) {
-        if (styles.hasOwnProperty(s)) {
-          if (Array.isArray(styles[s])) {
-            // support fallback value
-            (styles[s] as string[]).forEach(val => {
-              el.style[s] = val;
-            });
-          } else {
-            el.style[s] = styles[s];
-          }
-        }
-      }
-    }
-  }
-  static copyProps(dst, src, props) {
-    for (let i = 0; i < props.length; i++) {
-      const p = props[i];
-      dst[p] = src[p];
-    }
-  }
-
-  static initEvent<T>(e: DragEvent|MouseEvent, info: {type: string; target?: EventTarget}) {
-    const kbdProps = 'altKey,ctrlKey,metaKey,shiftKey'.split(',');
-    const ptProps = 'pageX,pageY,clientX,clientY,screenX,screenY'.split(',');
-    const evt = {type: info.type};
-    const obj = {
-      button: 0,
-      which: 0,
-      buttons: 1,
-      bubbles: true,
-      cancelable: true,
-      originEvent: e,
-      target: info.target? info.target : e.target
-    }
-    if (e instanceof DragEvent) {
-      Object.assign(obj, {dataTransfer: e.dataTransfer});
-    }
-    DDUtils.copyProps(evt, e, kbdProps);
-    DDUtils.copyProps(evt, e, ptProps);
-    DDUtils.copyProps(evt, obj, Object.keys(obj));
-    return evt as unknown as T;
-  }
-}
diff --git a/src/dragdrop/gridstack-dd-native.ts b/src/dragdrop/gridstack-dd-native.ts
deleted file mode 100644
index b4b9edab1..000000000
--- a/src/dragdrop/gridstack-dd-native.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-// gridstack-dd-native.ts 2.0.2-dev @preserve
-
-/**
- * https://gridstackjs.com/
- * (c) 2020 Alain Dumesny, rhlin
- * gridstack.js may be freely distributed under the MIT license.
-*/
-import { DDManager } from './dd-manager';
-import { DDElement } from './dd-element';
-
-import { GridStack, GridStackElement } from '../gridstack';
-import { GridStackDD, DDOpts, DDKey, DDDropOpt, DDCallback, DDValue } from '../gridstack-dd';
-import { GridItemHTMLElement, DDDragInOpt } from '../types';
-
-/**
- * HTML 5 Native DragDrop based drag'n'drop plugin.
- */
-export class GridStackDDNative extends GridStackDD {
-  public constructor(grid: GridStack) {
-    super(grid);
-  }
-
-  public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDDNative {
-    let dEl = this.getGridStackDDElement(el);
-    if (opts === 'disable' || opts === 'enable') {
-      dEl.ddResizable[opts]();
-    } else if (opts === 'destroy') {
-      if (dEl.ddResizable) {
-        dEl.cleanResizable();
-      }
-    } else if (opts === 'option') {
-      dEl.setupResizable({ [key]: value });
-    } else {
-      let handles = dEl.el.getAttribute('gs-resize-handles') ? dEl.el.getAttribute('gs-resize-handles') : this.grid.opts.resizable.handles;
-      dEl.setupResizable({
-        ...this.grid.opts.resizable,
-        ...{ handles: handles },
-        ...{
-          start: opts.start,
-          stop: opts.stop,
-          resize: opts.resize
-        }
-      });
-    }
-    return this;
-  }
-
-  public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): GridStackDDNative {
-    const dEl = this.getGridStackDDElement(el);
-    if (opts === 'disable' || opts === 'enable') {
-      dEl.ddDraggable && dEl.ddDraggable[opts]();
-    } else if (opts === 'destroy') {
-      if (dEl.ddDraggable) { // error to call destroy if not there
-        dEl.cleanDraggable();
-      }
-    } else if (opts === 'option') {
-      dEl.setupDraggable({ [key]: value });
-    } else {
-      dEl.setupDraggable({
-        ...this.grid.opts.draggable,
-        ...{
-          containment: (this.grid.opts._isNested && !this.grid.opts.dragOut)
-            ? this.grid.el.parentElement
-            : (this.grid.opts.draggable.containment || null),
-          start: opts.start,
-          stop: opts.stop,
-          drag: opts.drag
-        }
-      });
-    }
-    return this;
-  }
-
-  public dragIn(el: GridStackElement, opts: DDDragInOpt): GridStackDDNative {
-    let dEl = this.getGridStackDDElement(el);
-    dEl.setupDraggable(opts);
-    return this;
-  }
-
-  public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDDNative {
-    let dEl = this.getGridStackDDElement(el);
-    if (typeof opts.accept === 'function' && !opts._accept) {
-      opts._accept = opts.accept;
-      opts.accept = (el) => opts._accept(el);
-    }
-    if (opts === 'disable' || opts === 'enable') {
-      dEl.ddDroppable && dEl.ddDroppable[opts]();
-    } else if (opts === 'destroy') {
-      if (dEl.ddDroppable) { // error to call destroy if not there
-        dEl.cleanDroppable();
-      }
-    } else if (opts === 'option') {
-      dEl.setupDroppable({ [key]: value });
-    } else {
-      dEl.setupDroppable(opts);
-    }
-    return this;
-  }
-
-  public isDroppable(el: GridItemHTMLElement): boolean {
-    const dEl = this.getGridStackDDElement(el);
-    return !!(dEl.ddDroppable);
-  }
-
-  public isDraggable(el: GridStackElement): boolean {
-    const dEl = this.getGridStackDDElement(el);
-    return !!(dEl.ddDraggable);
-  }
-
-  public on(el: GridItemHTMLElement, name: string, callback: DDCallback): GridStackDDNative {
-    let dEl = this.getGridStackDDElement(el);
-    dEl.on(name, (event: Event) => {
-      callback(
-        event,
-        DDManager.dragElement ? DDManager.dragElement.el : event.target as GridItemHTMLElement,
-        DDManager.dragElement ? DDManager.dragElement.helper : null)
-    });
-    return this;
-  }
-
-  public off(el: GridItemHTMLElement, name: string): GridStackDD {
-    let dEl = this.getGridStackDDElement(el);
-    dEl.off(name);
-    return this;
-  }
-  private getGridStackDDElement(el: GridStackElement): DDElement {
-    let dEl;
-    if (typeof el === 'string') {
-      dEl =  document.querySelector(el as string);
-    } else {
-      dEl = el;
-    }
-    return dEl.ddElement ? dEl.ddElement: DDElement.init(dEl);
-  }
-}
-
-// finally register ourself
-GridStackDD.registerPlugin(GridStackDDNative);
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 2f65e99d5..d29094428 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -17,6 +17,10 @@ export * from './utils';
 export * from './gridstack-engine';
 export * from './gridstack-dd';
 
+// TEMPORARY import the jquery-ui drag&drop since we don't have alternative yet and don't expect users to create their own yet
+import './jq/gridstack-dd-jqueryui';
+export * from './jq/gridstack-dd-jqueryui';
+
 export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
 
 export interface GridHTMLElement extends HTMLElement {
diff --git a/src/index-html5.ts b/src/index-html5.ts
deleted file mode 100644
index 0ae4ce62f..000000000
--- a/src/index-html5.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// index.html5.ts 2.0.2-dev - everything you need for a Grid that uses HTML5 native drag&drop (work in progress) @preserve
-
-// import './gridstack-poly.js';
-
-export * from './types';
-export * from './utils';
-export * from './gridstack-engine';
-export * from './gridstack-dd';
-export * from './gridstack';
-
-export * from './dragdrop/gridstack-dd-native';
-
-// declare module 'gridstack'; for umd ?
diff --git a/src/index-jq.ts b/src/index-jq.ts
deleted file mode 100644
index 4e7ac2d8d..000000000
--- a/src/index-jq.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// index.jq.ts 2.0.2-dev - everything you need for a Grid that uses Jquery-ui drag&drop (original, full feature) @preserve
-
-// import './gridstack-poly.js';
-
-export * from './types';
-export * from './utils';
-export * from './gridstack-engine';
-export * from './gridstack-dd';
-export * from './gridstack';
-
-export * from './jq/gridstack-dd-jqueryui';
-
-// declare module 'gridstack'; for umd ?
diff --git a/src/index-static.ts b/src/index-static.ts
deleted file mode 100644
index 27389bf98..000000000
--- a/src/index-static.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// index.static.ts 2.0.2-dev - everything you need for a static Grid (non draggable) @preserve
-
-// import './gridstack-poly.js';
-
-export * from './types';
-export * from './utils';
-export * from './gridstack-engine';
-export * from './gridstack-dd';
-export * from './gridstack';
-
-// declare module 'gridstack'; for umd ?
diff --git a/webpack.config.js b/webpack.config.js
index bf33e6f87..2933dc88f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,9 +2,10 @@ const path = require('path');
 
 module.exports = {
   entry: {
-    'gridstack.all': './src/index-jq.ts',
-    'gridstack.html5': './src/index-html5.ts',
-    'gridstack.static': './src/index-static.ts'
+    'gridstack.all': './src/gridstack.ts',
+    //'gridstack.all': './src/index-jq.ts',
+    //'gridstack.html5': './src/index-html5.ts',
+    //'gridstack.static': './src/index-static.ts'
   },
   mode: 'production', // production vs development
   devtool: 'source-map',
