Js natif combiné avec un cookie pour créer un glisser-déposer de compétences de sauvegarde path

Js natif combiné avec un cookie pour créer un glisser-déposer de compétences de sauvegarde path_javascript

WBOY

Libérer： 2016-05-16 15:22:52

original

1546 Les gens l'ont consulté

Utilise principalement du js natif pour encapsuler un cookie, puis utilise trois événements pour le glisser-déposer, à savoir onmousedown, onmousemove, onmouseup, deux de ces trois événements Vous devez ajouter un objet événement, c'est-à-dire un événement. L'objet événement est une chose incompatible, vous devez donc gérer les problèmes de compatibilité, c'est-à-dire oEvent = ev event, obtenez le point lorsque la souris clique sur l'événement. l'écran, puis soustrayez une distance du côté gauche de l'objet glissé, et enfin vous pouvez obtenir la distance entre la position actuelle du clic et l'objet.

Enfin, un retour false a été effectué lors de onmouseup, principalement pour empêcher la sélection de texte dans les navigateurs de versions supérieures. Grâce à la méthode addCookie dans le cookie, la position lorsque l'objet est glissé et arrêté est stockée dans le cookie. Ensuite, lorsque la page est chargée, la méthode getCookie est appelée pour obtenir la position de l'objet, et un glisser-déposer qui l'utilise. un cookie pour enregistrer la position est créé.

S'il y a le html suivant :

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

Copier après la connexion

CSS :

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

Copier après la connexion

Le code pour glisser avec js est le suivant :

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;
    };
  }
};

Copier après la connexion

Ce qui précède est l'effet glisser-déposer de js natif combiné à la création de cookies et au chemin d'enregistrement. J'espère que cela inspirera l'apprentissage de tout le monde.