简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

WBOY
リリース： 2023-10-25 09:03:29
オリジナル
1173 人が閲覧しました

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

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

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

1. HTML 構造

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

    ) を使用します。各画像はリスト項目 (
  • ) で表され、画像タグ (HTML、CSS、および jQuery: 画像のドラッグ アンド ドロップによる並べ替えのヒント) が含まれています: 
    <!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 サイトの他の関連記事を参照してください。

関連ラベル：
引っ張る 画像 選別
ソース：php.cn
前の記事：HTML、CSS、jQuery: 美しいピクチャーウォールを構築する 次の記事：画像の自動トリミングとズーム機能をJavaScriptで実装するにはどうすればよいですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
単語と一致する正規表現 新しいジョブ名をデータベース内の既存のジョブ名と照合しようとするスクリプトがあります。 SELECTa.titleASJobTitle,j.DescriptionASMatched...
から 2024-04-06 21:24:04
0
1
606
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
グリッドを使用してこの特定のデザインを作成する: ステップバイステップ ガイド この画像に似たレイアウトを作成しようとしています。このグリッドを使用してみましたが、実現できません。 <ulclass="container">&l...
から 2024-04-06 20:29:08
0
2
492
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！