Bagaimana untuk Mencipta Elemen HTML Boleh Resizable Menggunakan JavaScript Tulen?

Mencipta Elemen HTML Boleh Resizable dengan JavaScript Tulen

Banyak perpustakaan wujud untuk membolehkan saiz semula elemen, tetapi bagi mereka yang mencari penyelesaian JavaScript tulen, perkara berikut langkah boleh digunakan:

1. Acara Pendengar: Lampirkan pendengar acara klik pada elemen HTML yang diingini. Ini akan memulakan proses mengubah saiz.
2. Penambahan Kelas: Tambahkan kelas CSS pada elemen, cth., "boleh diubah saiz," untuk menunjukkan secara visual bahawa ia telah memasuki mod ubah saiz.
3. Penciptaan Elemen Resizer: Cipta elemen HTML baharu, seperti
   , dan berikan kelas "resizer". Elemen ini akan berfungsi sebagai pemegang seret.
4. Pendengar Acara untuk Resizer: Tambahkan pendengar acara turun tetikus pada resizer, yang akan mencetuskan permulaan proses seretan.
5. Permulaan Seret: Simpan kedudukan awal tetikus, dimensi elemen dan ubah saiz elemen.
6. Fungsi Seret: Tambah pendengar acara gerak tetikus pada dokumen untuk mengemas kini dimensi elemen semasa tetikus dialihkan.
7. Penamatan Seret: Pada mouseup, alih keluar pendengar acara mousemove dan mouseup, melengkapkan saiz semula proses.

Berikut ialah coretan kod contoh yang melaksanakan pendekatan ini:

var p = document.querySelector('p'); // element to make resizable

p.addEventListener('click', function init() {
    p.removeEventListener('click', init, false);
    p.className = p.className + ' resizable';
    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
   p.style.width = (startWidth + e.clientX - startX) + 'px';
   p.style.height = (startHeight + e.clientY - startY) + 'px';
}

function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}

Perlu diingat bahawa pendekatan ini mungkin tidak serasi dengan semua penyemak imbas dan Internet Explorer versi di bawah 9 secara khusus diketahui mempunyai masalah.