jQuery menggunakan kesan seretan untuk merealisasikan seretan percuma div_jquery

Saya secara tidak sengaja melihat kesan seretan div yang saya buat sebelum ini.

Mula-mula mari kita bercakap tentang prinsip pelaksanaan dan perkara utama Yang paling penting ialah tiga langkah. Langkah pertama ialah acara turun tetikus Apabila tetikus diturunkan tetikus, paksi X dan paksi Y tetikus serta kiri dan atas kotak seret direkodkan dan nilai benar ditetapkan pada tanda seret. , yang bermaksud bahawa tindakan seret sudah sedia. Langkah kedua ialah peristiwa pergerakan tetikus Pada masa ini, paksi-X dan paksi-Y tetikus diperoleh secara dinamik, dan kemudian kiri dan atas kotak seretan baharu dikira dan ditetapkan untuk mencapai kesan seretan. Langkah ketiga ialah acara naik tetikus Apabila tetikus melantun ke atas, bendera seret diberikan nilai palsu dan tindakan seretan selesai.

Kod html adalah seperti berikut:

<div class="divWrap" id="move1" style="width: 200px; height: 200px; background: Green; border: 1px solid red; position: absolute; top: 100px; left: 100px; cursor: move; -moz-user-select: none; -webkit-user-select: none;"></div>
<div class="divWrap" style="width: 200px; height: 200px; background: brown; border: 1px solid red; position: absolute; top: 300px; left: 100px;">
  <h3 id="move2" style="height: 45px; line-height: 45px; font-size: 18px; background: red; margin: 0; cursor: move; -moz-user-select: none; -webkit-user-select: none;">Title--Move</h3>
</div>

Kod js adalah seperti berikut:

(function($) {
  $.fn.dragDiv = function(divWrap) {
    return this.each(function() {
      var $divMove = $(this);//鼠标可拖拽区域
      var $divWrap = divWrap ? $divMove.parents(divWrap) : $divMove;//整个移动区域
      var mX = 0, mY = 0;//定义鼠标X轴Y轴
      var dX = 0, dY = 0;//定义div左、上位置
      var isDown = false;//mousedown标记
      if(document.attachEvent) {//ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
        $divMove[0].attachEvent('onselectstart', function() {
          return false;
        });
      }
      $divMove.mousedown(function(event) {
        var event = event || window.event;
        mX = event.clientX;
        mY = event.clientY;
        dX = $divWrap.offset().left;
        dY = $divWrap.offset().top;
        isDown = true;//鼠标拖拽启动
      });
      $(document).mousemove(function(event) {
        var event = event || window.event;
        var x = event.clientX;//鼠标滑动时的X轴
        var y = event.clientY;//鼠标滑动时的Y轴
        if(isDown) {
          $divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div动态位置赋值
        }
      });
      $divMove.mouseup(function() {
        isDown = false;//鼠标拖拽结束
      });
    });
  };
})(jQuery);
//
$(document).ready(function() {
  $("#move1").dragDiv();//拖拽整个div
  $("#move2").dragDiv(".divWrap");//拖拽div头部
});

Akhir sekali, adalah perlu untuk melarang memilih kandungan sebelum memulakan tindakan menyeret, jika tidak, kesan seretan akan terjejas. Firefox dan Chrome boleh ditetapkan melalui CSS: {-moz-user-select: none; -webkit-user-select: none;}. IE juga boleh menulis onselectstart="return false" secara langsung dalam HTML, tetapi nampaknya Chrome Saya sedikit terjejas, jadi saya memutuskan untuk membatalkan kaedah penulisan ini, dan kemudian menulis acara onselectstart dalam js untuk pelayar IE.

Pemalam kecil ini hanya melaksanakan kesan seret dan lepas, tetapi ia mempunyai keserasian yang baik dan juga menggunakan beberapa pengetahuan dan kemahiran. Sudah tentu, anda juga boleh menggunakan pemalam ini atau idea di dalamnya untuk terus mengembangkan dan menulis pemalam drag-and-drop yang lebih lengkap (seperti Draggable dan Droppable).

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.