​

    let dragMoveListener = (event) => {

      let draggable = document.querySelector(".draggable"),

          follower = document.querySelector(".follower"),

          target = event.target,

          x = event.clientX,

          y = event.clientY;

​

      follower.style.visibility = 'visible';

      follower.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

​

      target.style.backgroundPosition = x + 'px ' + y + 'px';

    };

​

    let containers = document.querySelectorAll(".container");

​

    containers.forEach(function (element) {

      interact(element).on("tap down", function (e) {

        var wt = element.querySelector('.draggable');

        var wect = wt.getBoundingClientRect();

        var follower = element.querySelector('.follower');

​

        // Set the position of the follower element to the position of the user's click/touch

        var x = e.clientX - wect.left;

        var y = e.clientY - wect.top;

        follower.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

        follower.style.visibility = 'visible';

      });

    });

​

    containers.forEach(function (element) {

      interact(element)

        .on("dragstart", function (e) {

          var x = element.getAttribute("data-x");

          var y = element.getAttribute("data-y");

          if (x != null && y != null) {

            //draggable.webkitTransform = draggable.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

          }

        })

        .on("dragmove", dragMoveListener)

        .on("dragend", function (e) {

          var draggable = document.querySelector(".draggable");

          var follower = document.querySelector(".follower");

          draggable.style.visibility = 'hidden';

          follower.style.visibility = 'hidden';

          //draggable.webkitTransform = draggable.style.transform = 'translate(0px, 0px)';

        })

        .draggable({

          onmove: dragMoveListener,

          modifiers: [

            interact.modifiers.restrict({

              restriction: 'parent',

              endOnly: false

            })

          ]

        });

    });