Javascript menjadikan elemen DOM draggable_Pengetahuan asas-tutorial js-php.cn

Javascript menjadikan elemen DOM draggable_Pengetahuan asas

WBOY

Lepaskan： 2016-05-16 15:10:07

asal

1667 orang telah melayarinya

Ringkasan:

Baru-baru ini, saya telah mengusahakan fungsi pratonton gambar dalam projek saya Pada masa ini, pengguna akan memuat naik gambar besar yang melebihi antara muka paparan. Akhirnya memutuskan untuk membuat kedudukan dengan lebar dan ketinggian tetap, dan pengguna boleh menyeret imej untuk melihatnya. Jadi saya menulis pemalam yang menyokong elemen DOM boleh seret untuk penyemak imbas seperti ie5+, chrome, Firefox dan opera.

Tidak banyak titik pengetahuan diperlukan untuk melaksanakan fungsi ini, seperti berikut:

1. element.style.left

dalam js

Pembolehubah dikembalikan mengikut style.left ialah rentetan dan pembolehubah pembolehubah

element.offsetLeft

dalam js

offsetLeft mengembalikan jenis int, pembolehubah tidak berubah (yang bermaksud menukar pembolehubah ini tidak akan menjejaskan reka letak)

2. acara.clientX dalam js

harta peristiwa clientX mengembalikan koordinat mendatar penuding tetikus ke halaman penyemak imbas (atau kawasan klien) apabila peristiwa dicetuskan.

3. element.className

dalam js

Kaedah kelas yang menukar gaya

Tiga perkara di atas semuanya adalah pengetahuan yang agak biasa. Apa yang saya ingin katakan adalah seperti berikut:

4. Tambahkan pemantauan acara untuk objek dalam js

element.addEventListener("event","fun",,"boolen");

acara: menunjukkan acara

keseronokan: merujuk kepada fungsi yang dilaksanakan selepas acara dicetuskan

Alamat projek: https://github.com/baixuexiyang/drag

Contoh:

var drag = new Drag("test", {
      onStart: function(){

      },
      onMove: function(){
        document.getElementById('position').innerHTML = '距离左边：' + drag.getPositions().left + '；距离顶部：' + drag.getPositions().top;
      },
      onStop: function(){

      }
    });

Salin selepas log masuk

Mari kita lihat masalah yang dihadapi dalam contoh lain Saya telah mengusahakan masalah ini untuk masa yang lama dan masih tidak dapat mencari penyelesaian yang baik

Mari kita lihat contoh: (Untuk kemudahan ujian, saya menulis kod dalam fail)

drag.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title>鼠标拖拽</title> 
  <style type="text/css"> 
    <!-- 
    #dragdiv{ 
      background-color:#0A0909; 
      height:200px; 
      width:157px; 
     
      position:absolute; 
    } 
    .ondrag{ 
      filter:alpha(opacity=200); 
      cursor:move; 
    } 
    .enddrag{ 
      filter:alpha(opacity=100); 
      cursor:default; 
    } 
    #father{ 
      width:600px; 
      height:700px; 
      background:#C63535; 
    } 
    --> 
  </style> 
</head> 
<body> 
  <div id="father"> 
  <div id="dragdiv"></div> 
  </div> 
  <script language="JavaScript"> 
    var dragdiv=document.getElementById("dragdiv"); 
    var father=document.getElementById("father"); 
    var offsetx=0; 
    var offsety=0; 
    var draging=false; 
    function beforeDrag(ev){ 
       
        if (!draging) { 
          draging = true; 
          var l = dragdiv.offsetLeft; 
          var t = dragdiv.offsetTop; 
          offsetx = ev.clientX - l; 
          offsety = ev.clientY - t; 
           
        } 
        else { 
          dragdiv.className = "enddrag"; 
          dragdiv.removeEventListener("mousemove",onDrag); 
          draging = false; 
          return; 
        } 
       
    } 
    function endDrag(){ 
      draging=false; 
      dragdiv.className="enddrag"; 
    } 
    function onDrag(ev){ 
      if (!draging) { 
        dragdiv.className = "enddrag"; 
        return; 
      } 
      else { 
        dragdiv.className = "ondrag"; 
       
        dragdiv.style.left = (ev.clientX - offsetx) + "px"; 
        dragdiv.style.top = (ev.clientY - offsety) + "px"; 
         
      } 
    } 
      dragdiv.addEventListener("mousedown",beforeDrag,true); 
      dragdiv.addEventListener("mousemove",onDrag,false); 
      dragdiv.addEventListener("mouseup",endDrag,true); 
 
  </script> 
 
</body> 
 
</html>

Salin selepas log masuk

Kodnya sangat mudah, jika anda sudi membacanya dengan sedikit perhatian, anda boleh memahaminya

Seretan pertama berjaya, tahan tetikus dan seret. Ia tidak akan berfungsi dengan betul untuk kali kedua Jika anda mahu ia berfungsi seperti biasa untuk kali kedua, anda mesti mengklik tetikus di tempat lain (iaitu, bahagian bukan seret)

Acara tetikus di atas

"mousedown" bermaksud acara ini dicetuskan apabila tetikus ditekan, (fungsi beforeDrag dicetuskan di atas)

"mousemove" bermaksud peristiwa ini dicetuskan apabila tetikus bergerak, (fungsi onDrag dicetuskan di atas)

"mouseup" bermaksud acara ini dicetuskan apabila tetikus ditekan dan kemudian dilepaskan. (Fungsi endDrag dicetuskan di atas)

ps: Masa tetikus yang diperiksa dalam talian ialah "onmousedown". Pengarang menguji "onmousedown" dan tiada tindak balas acara, tetapi "mousedowm" adalah normal

Untuk masalah yang dinyatakan di atas, saya telah mencuba banyak percubaan, dengan mengambil kira masalah pesanan addEventListener dan masalah aliran peristiwa bagi parameter ketiga benar/salah, tetapi saya masih belum menemui penyelesaian yang sempurna

Acara "mouseup" gagal dipantau untuk kali kedua, dan adalah perkara biasa untuk mendapatkan semula fokus (hanya klik tetikus di tempat lain)