jQuery menggunakan kesan seretan untuk merealisasikan seretan percuma div_jquery

WBOY
Lepaskan: 2016-05-16 15:55:34
asal
1356 orang telah melayarinya

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

Kod js adalah seperti berikut:

(function($) {
  $.fn.dragDiv = function(divWrap) {
    return this.each(function() {
      var $divMove = $(this);//鼠标可拖拽区域
      var $divWrap = divWrap &#63; $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头部
});

Salin selepas log masuk

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.

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
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!