Bagaimanakah JavaScript boleh melaksanakan penyeretan kotak pop timbul sambil mengehadkannya ke kawasan halaman yang boleh dilihat?-tutorial js-php.cn

Bagaimanakah JavaScript boleh melaksanakan penyeretan kotak pop timbul sambil mengehadkannya ke kawasan halaman yang boleh dilihat?

WBOY

Lepaskan： 2023-10-18 12:26:14

asal

606 orang telah melayarinya

JavaScript 如何实现弹出框的拖动的同时限制在页面可见区域内？

JavaScript Bagaimana untuk merealisasikan penyeretan kotak pop timbul sambil mengehadkannya ke kawasan yang kelihatan pada halaman?

Dalam pembangunan web, kami sering menghadapi keperluan untuk melaksanakan kotak pop timbul atau kotak dialog. Salah satu keperluan biasa ialah membenarkan kotak pop timbul ini diseret secara bebas dan terhad kepada kawasan halaman yang boleh dilihat. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi ini dan menyediakan contoh kod yang sepadan.

Pertama, kita perlu memahami beberapa konsep asas. Dalam pembangunan Web, kawasan halaman yang boleh dilihat boleh diwakili oleh lebar dan ketinggian tetingkap, yang sepadan dengan window.innerWidth dan window.innerHeight masing-masing. Kedudukan kotak pop timbul biasanya dikawal menggunakan sifat kiri dan atas Kita boleh menukar kedudukan kotak timbul dengan mengubah suai kedua-dua sifat ini. window.innerWidth和window.innerHeight。而弹出框的位置通常使用left和top属性来控制，我们可以通过修改这两个属性来改变弹出框的位置。

接下来，我们将介绍具体的实现步骤。首先，我们需要一个事件监听器，在用户点击并按住弹出框的标题栏时触发。在这个事件监听器中，我们需要获取鼠标相对于弹出框的初始位置和弹出框的初始位置，以便后续的计算。

var dialog = document.getElementById("dialog");
var title = dialog.querySelector(".title");

var initialMouseX = 0;
var initialMouseY = 0;
var initialDialogX = 0;
var initialDialogY = 0;
var isDragging = false;

title.addEventListener("mousedown", function(e) {
  isDragging = true;
  initialMouseX = e.clientX;
  initialMouseY = e.clientY;
  initialDialogX = dialog.offsetLeft;
  initialDialogY = dialog.offsetTop;
});

document.addEventListener("mouseup", function() {
  isDragging = false;
});

document.addEventListener("mousemove", function(e) {
  if (isDragging) {
    var deltaX = e.clientX - initialMouseX;
    var deltaY = e.clientY - initialMouseY;
    var newDialogX = initialDialogX + deltaX;
    var newDialogY = initialDialogY + deltaY;

    // 限制在页面可见区域内
    var maxDialogX = window.innerWidth - dialog.offsetWidth;
    var maxDialogY = window.innerHeight - dialog.offsetHeight;
    newDialogX = Math.max(0, Math.min(newDialogX, maxDialogX));
    newDialogY = Math.max(0, Math.min(newDialogY, maxDialogY));

    dialog.style.left = newDialogX + "px";
    dialog.style.top = newDialogY + "px";
  }
});

Salin selepas log masuk

以上代码中，我们使用mousedown事件监听用户点击标题栏，mouseup事件监听释放鼠标按键，mousemove事件监听鼠标移动。在mousemove事件中，我们首先计算出鼠标相对于初始位置的偏移量，然后通过加上初始位置得到新的弹出框位置。

接下来，我们需要限制弹出框在页面可见区域内。为此，我们首先计算出右边界和下边界的最大位置，分别为页面宽度减去弹出框的宽度和页面高度减去弹出框的高度。然后，我们使用Math.max和Math.min

Seterusnya, kami akan memperkenalkan langkah pelaksanaan khusus. Pertama, kami memerlukan pendengar acara yang menyala apabila pengguna mengklik dan menahan bar tajuk kotak timbul. Dalam pendengar acara ini, kita perlu mendapatkan kedudukan awal tetikus berbanding dengan kotak pop timbul dan kedudukan awal kotak timbul untuk pengiraan seterusnya.

rrreee

Dalam kod di atas, kami menggunakan acara mouseup untuk memantau pengguna mengklik bar tajuk, acara mouseup untuk memantau pelepasan butang tetikus dan Acara mousemove untuk memantau pergerakan tetikus . Dalam acara mousemove, kami mula-mula mengira offset tetikus berbanding kedudukan awal, dan kemudian dapatkan kedudukan kotak pop timbul baharu dengan menambah kedudukan awal.

Seterusnya, kita perlu mengehadkan kotak pop timbul kepada kawasan halaman yang boleh dilihat. Untuk melakukan ini, kita mula-mula mengira kedudukan maksimum sempadan kanan dan bawah, iaitu lebar halaman tolak lebar kotak timbul dan ketinggian halaman tolak ketinggian kotak timbul, masing-masing. Kemudian, kami menggunakan fungsi Math.max dan Math.min untuk mengehadkan kedudukan kotak pop timbul baharu kepada kawasan yang boleh dilihat pada halaman. 🎜🎜Akhir sekali, kami menggunakan kedudukan pop timbul baharu pada elemen DOM sebenar. 🎜🎜Di atas ialah cara menggunakan JavaScript untuk menyeret kotak pop timbul dan menghadkannya ke kawasan yang boleh dilihat pada halaman. Melalui kaedah ini, kami boleh menambah pengalaman pengguna yang lebih fleksibel dan mesra pada halaman web. Dalam projek sebenar, anda boleh mengubah suai dan mengoptimumkan kod ini mengikut keperluan khusus untuk memenuhi keperluan anda sendiri. 🎜

Atas ialah kandungan terperinci Bagaimanakah JavaScript boleh melaksanakan penyeretan kotak pop timbul sambil mengehadkannya ke kawasan halaman yang boleh dilihat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!