ホームページ >ウェブフロントエンド >jsチュートリアル >HTML、CSS、および jQuery: 画像のドラッグアンドドロップによる並べ替えのヒント

HTML、CSS、および jQuery: 画像のドラッグアンドドロップによる並べ替えのヒント

WBOYオリジナル: 2023-10-25 09:03:291243ブラウズ

HTML、CSS、および jQuery: 画像のドラッグアンドドロップによる並べ替えを実装するためのヒント

現代の Web デザインでは、画像のドラッグアンドドロップによる並べ替えは一般的で人気のある機能になっています。ユーザーは画像をドラッグすることで画像の順序を自由に調整できるため、ユーザーエクスペリエンスとインタラクティブ性が向上します。この記事では、HTML、CSS、jQuery を使用して画像のドラッグアンドドロップによる並べ替えを実装する方法と、具体的なコード例を紹介します。

1. HTML 構造

まず、HTML ファイルを作成し、基本的なページ構造を設定します。画像を含めるために、順序なしリスト (

) で表され、画像タグ () が含まれています:
```
<!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、および jQuery: 画像のドラッグ アンド ドロップによる並べ替えのヒント" ></li>
        <li><img  src="image2.jpg" alt="HTML、CSS、および jQuery: 画像のドラッグ アンド ドロップによる並べ替えのヒント" ></li>
        <li><img  src="image3.jpg" alt="HTML、CSS、および jQuery: 画像のドラッグ アンド ドロップによる並べ替えのヒント" ></li>
        <li><img  src="image4.jpg" alt="HTML、CSS、および jQuery: 画像のドラッグ アンド ドロップによる並べ替えのヒント" ></li>
        <li><img  src="image5.jpg" alt="HTML、CSS、および jQuery: 画像のドラッグ アンド ドロップによる並べ替えのヒント" ></li>
    </ul>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
```
2. CSS スタイル

ドラッグを実現するには、アンドドロップ並べ替え効果。画像のスタイルを設定するには CSS を使用する必要があります。 style.css ファイルに、次のスタイルコードを追加します:
```
#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. jQuery のドラッグアンドドロップの並べ替え関数

ドラッグアンドドロップの並べ替え関数を実装するには、sortable (ソート可能) メソッド。 script.js ファイルに、次のコードを追加します。
```
$(function() {
    $("#sortable").sortable();
});
```
4. 効果の完成

上記の手順により、画像のドラッグアンドドロップによる並べ替えの基本的な実装が完了しました。ブラウザを開いて HTML ファイルを実行すると、画像のリストが表示されます。マウスを使用して画像をクリックしてドラッグし、並べ替えてみてください。

ドラッグアンドドロップによる並べ替え機能を実装するには、jQuery および jQuery UI ライブラリをプロジェクトに導入し、それらのファイルパスが正しく設定されていることを確認する必要があることに注意してください。

まとめ

HTML、CSS、jQueryを利用することで、ドラッグ＆ドロップで画像の並べ替え機能を簡単に実装できます。上記のサンプルコードは、実際のニーズに応じて変更および拡張できる基本的なフレームワークを提供します。この記事がドラッグアンドドロップによる画像の並べ替えテクニックを理解するのに役立ち、Web デザインでの成功を祈っています。

参考元：
- jQuery UI公式ドキュメント：https://jqueryui.com/sortable/
- CSSオブジェクト適応性：https://developer.mozilla .org/zh-CN/docs/Web/CSS/object-fit

以上がHTML、CSS、および jQuery: 画像のドラッグアンドドロップによる並べ替えのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jquery css html Object JS 对象 ul li https ui

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML、CSS、jQuery: 美しいピクチャーウォールを構築する次の記事：HTML、CSS、jQuery: 美しいピクチャーウォールを構築する

続きを見る

HTML、CSS、および jQuery: 画像のドラッグ アンド ドロップによる並べ替えのヒント

関連記事

HTML、CSS、および jQuery: 画像のドラッグアンドドロップによる並べ替えのヒント