Rumah > hujung hadapan web > tutorial js > Native js digabungkan dengan kuki untuk mencipta kemahiran seret dan lepas simpan path_javascript

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

WBOY
Lepaskan: 2016-05-16 15:22:52
asal
1545 orang telah melayarinya

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>
Salin selepas log masuk

CSS:

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

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

Salin selepas log masuk

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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan