Beberapa aplikasi mudah Javascript seret dan lepas (analisis kod baris demi baris, membolehkan anda memahami dengan mudah prinsip seret dan lepas)_kemahiran javascript

Hari ini kita akan melihat bagaimana untuk menghalang objek yang diseret daripada diseret keluar dari div tertentu dan fungsi penjerapan menyeret

Seperti yang dinyatakan pada kali lepas, penyeretan kami tidak boleh diseret keluar dari kawasan visual Atas dasar ini, kami menambah div induk untuk mengelakkannya daripada diseret keluar daripada induk. Prinsipnya sama seperti dahulu, mudah.

kod html:

<div id="div2">
      <div id="div1">

      </div>
    </div>

kod css:

<style type="text/css">
      #div1 {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
      }
      #div2 {
        width: 400px;
        height: 300px;
        background: #CCCCCC;
        position: relative;
      }
    </style>

kod javascript:

<script type="text/javascript">
       // 拖拽空div 低版本的火狐有bug
      window.onload = function() {
        var oDiv = document.getElementById("div1");
        var oDiv2 = document.getElementById("div2");
        var disX = 0;
        var disY = 0;
        oDiv.onmousedown = function(ev) {
          var oEvent = ev || event;
          disX = oEvent.clientX - oDiv.offsetLeft;
          disY = oEvent.clientY - oDiv.offsetTop;

          document.onmousemove = function(ev) {
            var oEvent = ev || event;
            // 存储div当前的位置
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;

            if (oDivLeft < 0) {
              oDivLeft = 0;
            } else if (oDivLeft > oDiv2.offsetWidth - oDiv.offsetWidth) {
              oDivLeft = oDiv2.offsetWidth - oDiv.offsetWidth;
            }

            if (oDivTop < 0) {
              oDivTop = 0;
            } else if (oDivTop > oDiv2.offsetHeight - oDiv.offsetHeight) {
              oDivTop = oDiv2.offsetHeight - oDiv.offsetHeight;
            }

            oDiv.style.left = oDivLeft + 'px';
            oDiv.style.top = oDivTop + 'px';
          };

          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
          return false; // 阻止默认事件,解决火狐的bug
        };
      };
    </script>

Rendering adalah seperti berikut:

Pastikan ia mudah.

Langkah seterusnya ialah bagaimana untuk menjadikannya menyerap secara automatik.

Malah, semua orang akan kerap menggunakan ini Sebagai contoh, apabila terdapat tetingkap kecil dalam PS dan diseret ke tepi halaman, ia secara automatik akan menjerap ke dalamnya.

Bagaimanakah seret dan lepas kita boleh mempunyai fungsi sedemikian?

Ini sebenarnya disebut sebelum ini apabila bercakap tentang senaman Sama seperti menaiki teksi, anda tidak boleh meminta pemandu untuk berhenti tepat di tempat yang anda mahu dia berhenti di suatu tempat yang dekat dengan destinasi.

Prosedurnya adalah sama, cuma tetapkan nilai terus apabila ia hampir sampai. Anggapkan bahawa apabila objek yang saya seret ialah 50px dari kiri, saya fikir ia telah sampai ke kiri, dan kemudian berikannya nilai 0, dan ia akan secara automatik melekat padanya.

Prinsipnya sangat mudah, mari lihat cara kod melaksanakannya. Hanya buat sedikit pengubahsuaian

<script type="text/javascript">
      window.onload = function() {
        var oDiv = document.getElementById("div1");
        var oDiv2 = document.getElementById("div2");
        var disX = 0;
        var disY = 0;
        oDiv.onmousedown = function(ev) {
          var oEvent = ev || event;
          disX = oEvent.clientX - oDiv.offsetLeft;
          disY = oEvent.clientY - oDiv.offsetTop;

          document.onmousemove = function(ev) {
            var oEvent = ev || event;
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;


            // 当left 小于50 就自动归0 这样实现吸附
            if (oDivLeft < 50) {
              oDivLeft = 0;
            } else if (oDivLeft > oDiv2.offsetWidth - oDiv.offsetWidth) {
              oDivLeft = oDiv2.offsetWidth - oDiv.offsetWidth;
            }

            if (oDivTop < 0) {
              oDivTop = 0;
            } else if (oDivTop > oDiv2.offsetHeight - oDiv.offsetHeight) {
              oDivTop = oDiv2.offsetHeight - oDiv.offsetHeight;
            }

            oDiv.style.left = oDivLeft + 'px';
            oDiv.style.top = oDivTop + 'px';
          };

          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
          return false; 
        };
      };
    </script>

Lain kali kita akan bercakap tentang aplikasi lanjutan, yang akan menjadi lebih bertanggungjawab dan berguna. Fungsi seret dan lepas kami telah dipertingkatkan.

Contohnya, menyeret gambar dan memilih teks. Sebagai contoh, halaman seret dan lepas semasa kami hanya mempunyai satu div, yang tidak akan pernah kami temui dalam pembangunan biasa.

Sebenarnya, apabila terdapat sesuatu pada halaman, apakah masalah yang akan berlaku dengan seret dan lepas ini? ? ?

Ia akan diselesaikan pada masa akan datang ~ Sila nantikannya