Jednoduchý drag & drop elementu pro ovládání dotykem

Výsledek

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

var presouvany = document.querySelector("#presouvany-element");
    var souradnice = {x: 0, y: 0}; // výchozí umístění „left: 0; top: 0“
    var posunSouradnice; // pro zjišťování posunu
    var puvodniSouradnice; // souradnice prvku před posunem

presouvany.ontouchstart = function(e) {
        console.log(1);
        var event = window.event || e;
        presouvany.setAttribute("data-move", "");
        puvodniSouradnice = {x : souradnice.x, y: souradnice.y};
        posunSouradnice = {
          x: event.touches[0].pageX,
          y: event.touches[0].pageY
        };
    };

document.ontouchmove = function(e) {
        if (!presouvany.hasAttribute("data-move")) return;
        var event = window.event || e;
        var x = puvodniSouradnice.x + event.touches[0].pageX - posunSouradnice.x;
        var y = puvodniSouradnice.y + event.touches[0].pageY - posunSouradnice.y;
        
        souradnice.x = x;
        souradnice.y = y;
        presouvany.style.left = x + "px";
        presouvany.style.top = y + "px";
    };

document.ontouchend = presouvany.ontouchend = function() {
        presouvany.removeAttribute("data-move");
    };

JS

Autoformát
jQuery
Umístění JS