jeudi 25 mai 2017

drag with a handle (no JQuery)

I wanted to create a div that can be dragged with a handle and made this code:

var mydragg = function() {
  return {
    move: function(divid, xpos, ypos) {
      divid.style.left = xpos + 'px';
      divid.style.top = ypos + 'px';
    },
    startMoving: function(divid, container, evt) {
      evt = evt || window.event;
      var posX = evt.clientX,
        posY = evt.clientY,
        divTop = divid.style.top,
        divLeft = divid.style.left,
        eWi = parseInt(divid.style.width),
        eHe = parseInt(divid.style.height),
        cWi = parseInt(document.getElementById(container).style.width),
        cHe = parseInt(document.getElementById(container).style.height);
      document.getElementById(container).style.cursor = 'move';
      divTop = divTop.replace('px', '');
      divLeft = divLeft.replace('px', '');
      var diffX = posX - divLeft,
        diffY = posY - divTop;
      document.onmousemove = function(evt) {
        evt = evt || window.event;
        var posX = evt.clientX,
          posY = evt.clientY,
          aX = posX - diffX,
          aY = posY - diffY;
        if (aX < 0) aX = 0;
        if (aY < 0) aY = 0;
        if (aX + eWi > cWi) aX = cWi - eWi;
        if (aY + eHe > cHe) aY = cHe - eHe;
        mydragg.move(divid.parentNode, aX, aY);
      }
    },
    stopMoving: function(container) {
      var a = document.createElement('script');
      document.getElementById(container).style.cursor = 'default';
      document.onmousemove = function() {}
    },
  }
}();
#container {
  position: absolute;
  background-color: teal;
}

#dragc {
  position: absolute;
  background-color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

#header {
  position: relative;
  background: black;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#202020, black);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#202020, black);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#202020, black);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#202020, black);
  /* Standard syntax */
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  height: 30px;
  width: 100%;
  color: white;
  font-size: 30px;
}

#taskbar {
  position: absolute;
  background: black;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#202020, black);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#202020, black);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#202020, black);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#202020, black);
  /* Standard syntax */
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  height: 40px;
  width: 100%;
  bottom: 0px;
  color: white;
  font-size: 35px;
}
<div id='container' style="width: 100%;height: 100%;top:0px;left:0px;">
  <div id="taskbar">
    ...
  </div>
  <div id="dragc" style="width: 200px;height: 100px; left: 30%; top: 20%;">
    <div id="header" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");'>
      Test window
    </div>
    <div>
      If you drag it, it resets its position, this is the problem.
    </div>
  </div>
</div>

The problem is, when you start dragging, its position resets to left: 0px; top: 0px; I have tried many things, all failed. I don't know, how to fix this, please help!




Aucun commentaire:

Enregistrer un commentaire