Rumah >hujung hadapan web >tutorial js >HTML, CSS dan jQuery: Petua untuk pengisihan seret dan lepas imej

HTML, CSS dan jQuery: Petua untuk pengisihan seret dan lepas imej

WBOYasal: 2023-10-25 09:03:291258semak imbas

HTML, CSS dan jQuery: Petua untuk melaksanakan pengisihan seret dan lepas imej

Dalam reka bentuk web moden, isihan seret dan lepas imej telah menjadi ciri biasa dan popular. Dengan menyeret imej, pengguna boleh melaraskan susunan imej secara bebas, dengan itu meningkatkan pengalaman pengguna dan interaktiviti. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk melaksanakan pengisihan seret dan lepas imej, dan memberikan contoh kod khusus.

1. Struktur HTML

Pertama, buat fail HTML dan tetapkan struktur halaman asas. Kami akan menggunakan senarai tidak tersusun (

) dan mengandungi teg imej ():
```
<!DOCTYPE html>
<html>
<head>
    <title>图像拖拽排序</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <ul id="sortable">
        <li><img  src="image1.jpg" alt="HTML, CSS dan jQuery: Petua untuk pengisihan seret dan lepas imej" ></li>
        <li><img  src="image2.jpg" alt="HTML, CSS dan jQuery: Petua untuk pengisihan seret dan lepas imej" ></li>
        <li><img  src="image3.jpg" alt="HTML, CSS dan jQuery: Petua untuk pengisihan seret dan lepas imej" ></li>
        <li><img  src="image4.jpg" alt="HTML, CSS dan jQuery: Petua untuk pengisihan seret dan lepas imej" ></li>
        <li><img  src="image5.jpg" alt="HTML, CSS dan jQuery: Petua untuk pengisihan seret dan lepas imej" ></li>
    </ul>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
```
2. Gaya CSS

Untuk mencapai kesan pengisihan seret dan lepas, kita perlu menggunakan CSS untuk menetapkan gaya imej. Dalam fail style.css, tambahkan kod gaya berikut:
```
#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sortable li {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 1px solid #ccc;
}

#sortable img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
```
3. fungsi isihan seret dan lepas jQuery

Untuk melaksanakan fungsi isihan seret dan lepas, kami akan menggunakan kaedah boleh diisih yang disediakan oleh perpustakaan UI jQuery. Dalam fail script.js, tambahkan kod berikut:
```
$(function() {
    $("#sortable").sortable();
});
```
4. Kesan lengkap

Melalui langkah di atas, kami telah menyelesaikan pelaksanaan asas pengisihan seret dan lepas imej. Buka penyemak imbas anda, jalankan fail HTML dan anda akan melihat senarai imej. Anda boleh cuba menggunakan tetikus anda untuk mengklik dan menyeret imej untuk mengisihnya.

Perlu diambil perhatian bahawa untuk melaksanakan fungsi pengisihan seret dan lepas, anda perlu memperkenalkan perpustakaan UI jQuery dan jQuery ke dalam projek dan memastikan laluan failnya ditetapkan dengan betul.

Ringkasan

Dengan menggunakan HTML, CSS dan jQuery, kami boleh melaksanakan fungsi pengisihan seret dan lepas imej dengan mudah. Kod sampel di atas menyediakan rangka kerja asas yang boleh anda ubah suai dan lanjutkan mengikut keperluan sebenar. Saya harap artikel ini akan membantu pemahaman anda tentang teknik pengisihan seret dan lepas imej, dan saya doakan anda berjaya dalam reka bentuk web!

Sumber rujukan:
- dokumentasi rasmi UI jQuery: https://jqueryui.com/sortable/
- Kebolehsuaian objek CSS: https://developer.mozilla.org/zh-CN/docs/Web/CSS/ objek -sesuai

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Petua untuk pengisihan seret dan lepas imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery css html Object JS 对象 ul li https ui

Kenyataan：

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

Artikel sebelumnya：HTML, CSS dan jQuery: Bina dinding gambar yang cantikArtikel seterusnya：HTML, CSS dan jQuery: Bina dinding gambar yang cantik

Artikel berkaitan

Lihat lagi