Native JS kombiniert mit Cookies, um Drag-and-Drop zum Speichern von path_javascript-Fähigkeiten zu erstellen

Verwendet hauptsächlich natives js, um ein Cookie zu kapseln, und verwendet dann drei Ereignisse für Drag & Drop, nämlich onmousedown, onmousemove, onmouseup, zwei dieser drei Ereignisse Sie müssen hinzufügen ein Ereignisobjekt, das heißt, das Ereignisobjekt ist eine inkompatible Sache, daher müssen Sie sich mit Kompatibilitätsproblemen befassen, das heißt, oEvent = ev || Bildschirm, und subtrahieren Sie dann einen Abstand von der linken Seite des gezogenen Objekts, und schließlich können Sie den Abstand von der aktuellen Klickposition zum Objekt erhalten.

Schließlich wurde während onmouseup ein „false“ zurückgegeben, hauptsächlich um zu verhindern, dass Text in Browsern höherer Versionen ausgewählt wird. Über die addCookie-Methode im Cookie wird die Position beim Ziehen und Stoppen des Objekts im Cookie gespeichert. Wenn die Seite geladen wird, wird die getCookie-Methode aufgerufen, um die Position des Objekts abzurufen, und ein Drag & Drop wird verwendet Es wird ein Cookie zum Speichern der Position erstellt.

Wenn es das folgende HTML gibt:

<div id="drag">拖动我</div>

CSS:

#drag{width: 100px; height: 100px; background: red; position: absolute; top: 0; left: 0;cursor:move;}

Der Code zum Ziehen mit js lautet wie folgt:

function addCookie(name, value, iDay) {
  var oDate = new Date();
  oDate.setDate(oDate.getDate() + iDay);
  document.cookie = name + '=' + value + '; path=/; expires=' + oDate;
}

function getCookie(name) {
  var arr = document.cookie.split('; ');
  for (var i = 0; i < arr.length; i++) {
    var arr2 = arr[i].split('=');

    return (arr2[0] == name) && arr2[1]
  }
  return '';
}

window.onload = function () {
  var oDiv = document.getElementById('drag');
  drag(oDiv);

  var move_by = getCookie('move_cood');
  if (move_by) {
    var str = eval('(' + move_by + ')');

    oDiv.style.left = str[0] + 'px';
    oDiv.style.top = str[1] + 'px';
  }

  function drag(obj) {
    obj.onmousedown = function (ev) {
      var oEvent = ev || event;
      var disX = oEvent.clientX - obj.offsetLeft,
  disY = oEvent.clientY - obj.offsetTop;

      document.onmousemove = function (ev) {
        var oEvent = ev || event;

        obj.style.left = oEvent.clientX - disX + 'px';
        obj.style.top = oEvent.clientY - disY + 'px';
      };

      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;

        obj.releaseCapture && obj.releaseCapture();

        addCookie('move_cood', '[' + obj.offsetLeft + ',' + obj.offsetTop + ']', 10);
      };

      obj.setCapture && obj.setCapture();
      return false;
    };
  }
}; 

Das Obige ist der Drag-and-Drop-Effekt von nativem JS in Kombination mit dem Cookie-Erstellungs- und Speicherpfad. Ich hoffe, dass es jeden zum Lernen anregen wird.