[CSSチュートリアル]ドラッグ＆ドロップ効果を実現するピュアCSSコード

想像力を働かせて、CSSでもドラッグ＆ドロップ効果を実現することができます。

I. ドラッグ＆ドロップ効果の例

これは、以下のStarting.com [1]のタッチスクリーン版のように、長押しでドラッグできるモバイルでは非常に一般的なエフェクトです。

このような効果は、JSでも簡単に実現できます。ただ、計算が少し多くなり、重要なシナリオを考慮する必要があり、さらにコードが少し増えるだけです。しかし、いくつかのブレーンストーミングの結果、CSSでもほぼこの効果を実現できることがわかりましたので、読んでみてください。

II. CSSのしくみ

従来のウェブでは、ページのスクロールは非常に一般的な操作であり、その操作方法は マウスのホイールを使用するか、スクロールバーを直接ドラッグしてください。 従来のウェブでは ところが、モバイルではそうではなく 指で直接ドラッグすることで、ページをスクロールすることができます。 通常、ページは縦か横にスクロールされ もし、両方向にスクロールできたらどうでしょう？ 例えば

Read and write permissions

コンテナよりも内側の要素の幅と高さを大きくするだけで、両方向にスクロールすることができます。 オーバーフロー:auto のようになります。

一般に、マウスホイールは一度に一方向にしかスクロールできませんが、(マウスホイールを押しながら シフト は反対方向へのスクロールが可能です）、モバイル側は コンテンツを直接ドラッグして、任意の方向にスクロールすることができます 以下のように

次に、コンテンツの真ん中に要素を追加して、コンテンツ領域がスクロールするのに追従させます。

次に、以下のテキストを非表示にします。

ちょっと違うかな？ ドラッグ＆ドロップ は、ドラッグ＆ドロップのようなものでしょうか？原理はとてもシンプルです

III. CSS実装の詳細

まず、ドラッグ コンテナに対するドラッグ ターゲットのサイズを決定します。ドラッグ ターゲットの寸法は次のとおりです。 w * h という寸法関係を導き出すのは簡単です。 内部サイズは、コンテナのサイズからドラッグターゲットのサイズを引いた値の2倍です。

read-only permissions

動画で説明すると以下のようになります（真ん中のオレンジのブロックがドラッグターゲットです）。

IV. レイアウトのCSS実装

次に、この機能をページに追加する方法ですが、ここでは2つのレイアウトを掲載しています。

1.固定配置

次に、先ほど作成したレイアウトを直接ページに追加し、そのページに 固定 位置決め

Bucket(ros-bucket)

主なスタイルは次のとおりです。

Group(devGroup)

階層的な図式関係は以下の通りです。

このように ドラッグボックス は元の部分が見えなくなっているはずなので、その部分にも pointer-events: none; また ポインターイベント: すべて

User

JSを使用すると、押されたときに外側のコンテナがスクロールするようにトリガーすることができます。

Policy

実際の効果は次のとおりです。

完全なコードは、https://codepen.io/xboxyan/pen/PobwxBK（PCからのアクセスは、モバイルモードをオンにしてください）でご覧いただけます。

また、以下のQRコードを直接読み取ることもできます。

1.絶対位置＋階層構造

先ほどのレイアウトは、位置が異なるため 固定 コンテナの状態を動的に変更するには、JS を使用する必要があります。 元のページに影響を与えずにドラッグ＆ドロップできる を実現する方法はありますか？ ab s オルート 位置づけ

ここでは、元ページを div コンテナは、次のようになります。

AccessControl

主なスタイルは次のとおりです。

private

これで、階層は次のようになります。

ここでは、元のページのコンテンツは、階層的に ドラッグボックス と ドラッグターゲット ドラッグしても元のページのスクロールに影響を与えないようにするため JS処理なし

完全なコードは、https://codepen.io/xboxyan/pen/bGBNQxL（PCからのアクセスは、モバイルモードをオンにしてください）でご覧いただけます。

また、以下のQRコードを直接読み取ることもできます。

ヒント: 上記の2つのレイアウトのうち、最初のレイアウトはより適応性が高く、既存のプロジェクトに影響を与えません。2番目のレイアウトはより使い勝手が良いですが、その場合は div をページスクロールのコンテナとして使用すると、ページ構造に若干の変更が生じるため、実際の状況に応じて選択することができます。

V. その他の機能を実現するCSS

1. 吸着機能

記事冒頭の模式図のように、ドラッグ＆ドロップの先で自動的にエッジに吸着させる必要がある場合も少なくありません。では、吸着にはどのようなプロパティを関連付けることができるのでしょうか。

答えは、CSS Scroll Snap [2]です。

"Resources": {
    "MyBucket": {
      "Type": "ALIYUN::OSS::Bucket",
      "Properties": {
        "AccessControl": "private",
        "BucketName": "ros-bucket"
      }
    }
  }

以下は、主要なスタイルです。

"Resources": {
    "devGroup": {
      "Type": "ALIYUN::RAM::Group",
      "Properties": {
        "GroupName": "devGroup"
      }
    }
  }

実際の効果は次のとおりです。

完全なコードは、https://codepen.io/xboxyan/pen/XWNJyPw（PCからのアクセスは、モバイルモードをオンにしてください）でご覧いただけます。

また、以下のQRコードを直接読み取ることもできます。

1. 初期位置の設定

デフォルトでは、ドラッグターゲットは右下のみですが、どうすれば左下に配置できるのでしょうか？それは簡単です。ここでは、ドラッグはコンテナをスクロールすることで実装されているので を変更する必要があります。 scrollLeft または scrollTop を指定します。

"Resources": {
    "liSir": {
      "Type": "ALIYUN::RAM::User"
      "Properties": {
        "UserName": "liSir",
        "LoginProfile": {
            "Password": "123456789"
        }
      }
    },
    "developer": {
      "Type": "ALIYUN::RAM::User",
      "Properties": {
        "UserName": "developer",
        "LoginProfile": {
            "Password": "123456789"
        },
        "Groups": [
          "Fn::Join": ["",
              [
                "Fn::GetAtt" : [ "devGroup", "GroupName"]
              ]
          ]
        ]
      }
    }
  }

あるいは、プレーンなHTMLで、次のようにすることもできます。 これは、要素のオートフォーカス機能を利用して、見える範囲にオートフォーカスするものです。

"Resources": {
    "fullAccessPolicy": {
      "Type": "ALIYUN::RAM::ManagedPolicy",
      "Properties": {
        "PolicyName": "fullAccessPolicy",
        "PolicyDocument" : {
            "Version": "1",
            "Statement" : [{
               "Effect" : "Allow",
               "Action" : [ "oss:*" ],
               "Resource" : ["acs:oss:*:*:*"]
            }]
         },
         "Users": [
             "Fn::Join": ["",
              [
                "Fn::GetAtt" : [ "liSir", "UserName"]
              ]
            ]
         ]       
      }
    },
    "readOnlyPolicy": {
      "Type": "ALIYUN::RAM::ManagedPolicy",
      "Properties": {
        "PolicyName": "readOnlyPolicy",
        "PolicyDocument": {
            "Version": "1",
            "Statement" : [{
              "Effect": "Allow",
              "Action": [
                "oss:ListBuckets"
              ],
              "Resource": [
                "acs:oss:*:*:*"
              ]
            },
            {
              "Effect": "Allow",
              "Action": [
                "oss:GetObject",
                "oss:ListObjects"
              ],
              "Resource": [
                "Fn::Join": ["",
                    [
                      "acs:oss:*:*:",
                      "Fn::GetAtt" : [ "MyBucket", "Name"]
                    ]
                ]
              ]
            }]
        },
        "Groups": [
            "Fn::Join": ["",
    

の初期位置が欲しいとします。 左上隅にある を追加すると 右下 要素の右下隅に

1. ボーダーを設定する

ドラッグターゲットの境界線が画面の端になったので、時には間隔を空ける必要があるかもしれません。 左/上/右/下 パディング ボーダー ... さまざまな方法

liSir

VI. 説明とまとめ

互換性には問題がないと思っていましたが、iosでは主にsafariのスクロールコンテナで多くの問題を検証してきました。例えば、iosの下位バージョンでは、スムーズにスクロールしないものがあり、そのような場合は、Safariに

-webkit-overflow-scrolling:toucを使用します。 h スムーズなスクロールと自動吸着を実現する唯一の方法ですが、このプロパティを設定すると、最も高い階層を持つネイティブ スクロール コンテナが作成されると説明しているドキュメントもあるように、階層の問題につながります。また、最初の固定レイアウトもあり、これはデフォルトで設定されている場合 ポインターイベント：なし は、その で タッチスタート が設定されています。 オート iosではスクロールが効きませんが、反転させると効きます（デモはios対応です）。

CSSの柔軟性を継承し、コストがほとんどかからず、再利用が容易で、ラグなくネイティブスクロールを活用できるという利点があります。

しかし、いくつかの制限があり、もし ドラッグターゲットの大きさが一定でない は、JSを使う必要があるかもしれません。もちろん、これでも比較すれば非常にコストパフォーマンスの高い実装です。

今思えば、あまり変わったプロパティは使っておらず（scroll-snapはそれに該当するかもしれませんが、結局はヘルパーです）、ほとんどが一般的な効果で、それを関連付けたり拡散したり、蓄積したものを元に本来の能力を引き出すことで、必要なインタラクションを実現し、この記事を書いているんです。

読んでくださってありがとうございます！今後の作品のヒントになればと思います。

参考文献

developer スターティング・ドット・コム  https://m.qidian.com/

[2] CSS スクロールスナップ。  https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scroll_Snap