Method prepareDragDrop

src/gridstack.ts:2713–2819

* prepares the element for drag&drop - this is normally called by makeWidget() unless are are delay loading * @param el GridItemHTMLElement of the widget * @param [force=false] *

(el: GridItemHTMLElement, force = false)

   * @param [force=false]
   * */
  public prepareDragDrop(el: GridItemHTMLElement, force = false): GridStack {
    const node = el?.gridstackNode;
    if (!node) return;
    const noMove = node.noMove || this.opts.disableDrag;
    const noResize = node.noResize || this.opts.disableResize;

    // check for disabled grid first
    const disable = this.opts.staticGrid || (noMove && noResize);
    if (force || disable) {
      if (node._initDD) {
        this._removeDD(el); // nukes everything instead of just disable, will add some styles back next
        delete node._initDD;
      }
      if (disable) {
        el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435
        return this;
      }
    }

    if (!node._initDD) {
      // variables used/cashed between the 3 start/move/end methods, in addition to node passed above
      let cellWidth: number;
      let cellHeight: number;

      /** called when item starts moving/resizing */
      const onStartMoving = (event: Event, ui: DDUIData) => {
        // trigger any 'dragstart' / 'resizestart' manually
        this.triggerEvent(event, event.target as GridItemHTMLElement);
        cellWidth = this.cellWidth();
        cellHeight = this.getCellHeight(true); // force pixels for calculations

        this._onStartMoving(el, event, ui, node, cellWidth, cellHeight);
      }

      /** called when item is being dragged/resized */
      const dragOrResize = (event: MouseEvent, ui: DDUIData) => {
        this._dragOrResize(el, event, ui, node, cellWidth, cellHeight);
      }

      /** called when the item stops moving/resizing */
      const onEndMoving = (event: Event) => {
        this.placeholder.remove();
        delete this.placeholder.gridstackNode;
        delete node._moving;
        delete node._resizing;
        delete node._event;
        delete node._lastTried;
        const widthChanged = node.w !== node._orig.w;

        // if the item has moved to another grid, we're done here
        const target: GridItemHTMLElement = event.target as GridItemHTMLElement;
        if (!target.gridstackNode || target.gridstackNode.grid !== this) return;

        node.el = target;

        if (node._isAboutToRemove) {
          const grid = el.gridstackNode.grid;
          if (grid._gsEventHandler[event.type]) {