Native js digabungkan dengan kuki untuk mencipta kemahiran seret dan lepas simpan path_javascript

Terutamanya menggunakan js asli untuk merangkum kuki, dan kemudian menggunakan tiga acara untuk seret dan lepas, iaitu onmousedown, onmousemove, onmouseup, dua daripada tiga acara ini Anda perlu tambah objek acara, iaitu acara, objek acara adalah perkara yang tidak serasi, jadi anda perlu menangani isu keserasian, iaitu, oEvent = ev || skrin, dan kemudian Kurangkan jarak dari sebelah kiri objek yang diseret, dan akhirnya anda boleh mendapatkan jarak dari kedudukan klik semasa ke objek.

Akhir sekali, balasan palsu dibuat semasa onmouseup, terutamanya untuk menghalang teks daripada dipilih dalam pelayar versi yang lebih tinggi. Melalui kaedah addCookie dalam kuki, kedudukan apabila objek diseret dan dihentikan disimpan dalam kuki Kemudian apabila halaman dimuatkan, kaedah getCookie dipanggil untuk mendapatkan kedudukan objek, dan seret dan lepas yang menggunakan. kuki untuk menyimpan kedudukan dibuat.

Jika terdapat html berikut:

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

CSS:

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

Kod untuk menyeret menggunakan js adalah seperti berikut:

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

Di atas ialah kesan seret dan lepas js asli digabungkan dengan penciptaan kuki dan laluan penjimatan, saya harap ia akan memberi inspirasi kepada pembelajaran semua orang.