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

Mně to funguje.

Ta ukázka funguje, neboť, jak píši přesouvám DIV a nikoliv IMG.

I když to změním na IMG, tak mi to funguje.

Tak to bude nějaké "Miss uderstanding".

Element IMG má totiž jiné vlastnosti a proto to na něj nefunguje.
Už jsem se trochu poptal jinde, a mám solution.

Musí se pracovat, tak jako je v ukázce s DIVem. Ovšem využije se jeho vlastnost "background-image"

Asi takto:

#myDiv {

display: block;
height: 140px;
width: 140px;
left: 30px;
top: 0px;
position: relative;
background-image: url("../background.png");
background-size: 100% auto;
background-repeat: no-repeat;
}

Jen nechápu, jaks to jakože udělal, že ti to chodí.
Mě to nechodí ani na tabletu, ani na PC.

Ale děkuji za zájem.
Myslím, už je to nějakým způsobem takto pořešeno.

Když nefunguje, tak co je tohle?
https://codepen.io/wikancz/pen/MWPEWxW

Element IMG je ve výchozím stavu tzv. Draggable.
To znamená, když odstraníš veškerý kód a necháš prachobyčejné HTML, bude se ti to chovat stejně takto.

Drag & Drop znamená, že objekt nejen reaguje na DRAG, ale v okamžiku, kdy jej pustíš zůstane tam, kde jsi ho pustil.

Ale mně zůstává, tam kde ho pustím. Asi pořád nechápu, co vlastně chceš.

Aha.

No ale ted jsem to test ve Firefoxu a nezůstává tam

Aha, ve FF to nefunguje. No nicméně stačí přidat ondragstart="return false" a už to funguje i tam.

Na to ondragstart="return false;" jsem nepřišel.

Navíc jsem to zkoušel jen ve Firefoxu.

👍

Ještě se k tomu vrátím, teď musím běžet.

Děkuji mnohokrát.

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. 👍