HTML, CSS dan jQuery: Petua untuk pengisihan seret dan lepas imej-tutorial js-php.cn

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

WBOY

Lepaskan： 2023-10-25 09:03:29

asal

1204 orang telah melayarinya

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

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>
```
Salin selepas log masuk
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;
}
```
Salin selepas log masuk
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();
});
```
Salin selepas log masuk
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!