Drag & Drop objektu ve webovém prohlížeči

Tak nakonec jsem se zamyslel nad různými variantami dosažení cíle.

Postup, který se mě nejvíce líbí je přes staré dobré jQuery (zdravíme moderní těžkoobratné webové vývojáře označující jej za údajně nevhodné pro velké projekty - vymřete na choleru, vy "intelektuálové" 👍).

Jquery má úplně jednoduchou funkci, jako facka -> Draggable

$(selector).draggable();

Více na odkaze s demem zde: https://jqueryui.com/draggable

Nicméně je pravda, v tabletech a na mobilech je potřeba přihrát tuto funkci, jinak to tam nejede:

  function touchHandler(event) {
      var touch = event.changedTouches[0];

      var simulatedEvent = document.createEvent("MouseEvent");
          simulatedEvent.initMouseEvent({
          touchstart: "mousedown",
          touchmove: "mousemove",
          touchend: "mouseup"
      }[event.type], true, true, window, 1,
          touch.screenX, touch.screenY,
          touch.clientX, touch.clientY, false,
          false, false, false, 0, null);

      touch.target.dispatchEvent(simulatedEvent);
      event.preventDefault();
  }

  function init() {
      document.addEventListener("touchstart", touchHandler, true);
      document.addEventListener("touchmove", touchHandler, true);
      document.addEventListener("touchend", touchHandler, true);
      document.addEventListener("touchcancel", touchHandler, true);
  }

 $( document ).ready(function() {

    init();

})

A to je celé přátelé.
Na rozdíl od jiných nabobtnalých knihoven je tento kód efektivní a netrhá se ani na pomalejších tabletech. 👍