JavaScript drag and drop aplikasi examples_javascript kemahiran

Idea asas drag dan drop juga telah dibincangkan dalam artikel sebelumnya Sekarang kita mempunyai teori, bagaimana dengan amalan? Di bawah saya akan bawakan kepada anda contoh kecil yang ditulis menggunakan pemikiran drag-and-drop untuk rujukan anda Kesan anggaran boleh dilihat dalam gambar di bawah:

Ia adalah bar seret yang begitu mudah Anda boleh memahaminya sebagai bar skrol, kawalan pemilihan kuantiti dalam bentuk, bar kemajuan, dll. Bagaimanapun, anda boleh menukarnya kepada banyak Tanpa berlengah lagi, mari lihat bagaimana ini. sudah selesai!

Selepas memikirkannya, saya rasa tidak perlu menjelaskan prinsip saya sudah jelaskan dalam kesan seretan Pelajar yang tidak pasti boleh keluar dan belok kiri untuk melihat contoh kecil javascript dan seret dan lepas pada halaman web PC saya akan menyiarkan kod secara langsung:

css:

<style>
#drag_wrap{
  width:220px;
  height:10px;
  position:relative;
  margin:100px auto;
}
.dis_bg{
  width:200px;
  height:10px;
  border-radius:10px;
  background:#ccc;
  margin-left:10px;
}
#drag_bg{
  width:0;
  height:10px;
  border-radius:10px;
  background:#0CF;
}
#drag_box{
  width:20px;
  height:20px;
  border-radius:10px;
  background:#F30;
  position:absolute;
  top:-5px;
  left:0;
  cursor:move;
}
#drag_box span{
  width:40px;
  height:20px;
  text-align:center;
  line-height:20px;
  border:1px solid #ccc;
  position:absolute;
  top:-25px;
  left:-10px;
  color:#333;
  background:#fff;
}
#drag_wrap1{
  width:10px;
  height:220px;
  position:relative;
  margin:100px auto;
}
.dis_bg1{
  width:10px;
  height:200px;
  border-radius:10px;
  background:#ccc;
  position:absolute;
  top:10px;
}
#drag_bg1{
  width:10px;
  height:0;
  border-radius:10px;
  background:#0CF;
}
#drag_bg1{
  width:10px;
  height:0;
  border-radius:10px;
  background:#0CF;
}
#drag_box1{
  width:20px;
  height:20px;
  border-radius:10px;
  background:#F30;
  position:absolute;
  top:-5px;
  left:-5px;
  cursor:move;
}
#drag_box1 span{
  width:40px;
  height:20px;
  text-align:center;
  line-height:20px;
  border:1px solid #ccc;
  position:absolute;
  top:0;
  left:25px;
  color:#333;
  background:#fff;
}
</style>

html:

<div id="drag_wrap">
    <div class="dis_bg">
      <div id="drag_bg"></div>
    </div>
    <div id="drag_box"><span>0</span></div>
     
  </div>
  <div id="drag_wrap1">
    <div class="dis_bg1">
      <div id="drag_bg1"></div>
    </div>
    <div id="drag_box1"><span>0</span></div>
  </div>

JavaScript:

window.onload = function(){
 
    drag("drag_box","drag_wrap","drag_bg","left");
    drag("drag_box1","drag_wrap1","drag_bg1","top");
     
    function drag(obj,parentNode,bgObj,attr,endFn){
      var obj = document.getElementById(obj);
      var parentNode = document.getElementById(parentNode);
      var bgObj = document.getElementById(bgObj);
      var oNum = obj.getElementsByTagName('span')[0];
      obj.onmousedown = function(ev){
        var ev = ev || event;
         
        //非标准设置全局捕获(IE)
        if(obj.setCapture){
          obj.setCapture()  
        };
 
        var disX = ev.clientX - this.offsetLeft,
          disY = ev.clientY - this.offsetTop;
        var oWidth = obj.offsetWidth,
          oHeight = obj.offsetHeight;
        var pWidth = parentNode.offsetWidth,
          pHeight = parentNode.offsetHeight;     
        document.onmousemove = function(ev){
          var ev = ev || event;
          if(attr == "left"){ //横向
            var left = ev.clientX - disX;
            //左侧
            if(left <= 0){
              left = 0;
            }else if(left > pWidth - oWidth){//右侧
              left = pWidth - oWidth;
            };
            obj.style.left = bgObj.style.width = left + 'px';
            oNum.innerHTML = left;
             
          }else if(attr == "top"){ //竖向
            var top = ev.clientY - disY;
             //上面
            if(top <= 0){
              top = 0;
            }else if(top > pHeight - oHeight){//下面
              top = pHeight - oHeight;
            };
            obj.style.top = bgObj.style.height = top + 'px';
            oNum.innerHTML = top;
          };
           
        };
        document.onmouseup = function(ev){
          var ev = ev || event;
          document.onmousemove = document.onmouseup = null;
          endFn && endFn();
          //非标准释放全局捕获(IE)
          if(obj.releaseCapture){
            obj.releaseCapture()  
          };
 
        };
        return false;
      }; 
    } 
   
  }

Perihalan parameter:

Lima parameter diberikan di sini, obj, parentNode, bgObj, attr, endFn, masing-masing:

obj: objek yang diseret

parentNode: objek yang mengehadkan kawasan aktif objek yang diseret, biasanya ditetapkan kepada induknya

bgObj: objek latar belakang warna apabila menyeret

attr: 2 parameter kiri, atas, menunjukkan sama ada hendak menyeret secara mendatar atau menegak

endFn: Fungsi kembali, ia akan dilaksanakan jika wujud, jika tidak, ia tidak akan dilaksanakan, pilihan

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.