H5 を使用してドラッグアンドドロップ効果を実現する方法-H5 チュートリアル-php.cn

H5 を使用してドラッグアンドドロップ効果を実現する方法

php中世界最好的语言

リリース： 2018-03-26 11:37:57

オリジナル

1926 人が閲覧しました

今回は、H5 を使用してドラッグアンドドロップ効果を実現する方法と、H5 を使用してドラッグアンドドロップ効果を実現するための注意点について説明します。以下は実際的なケースです。一見。

ドラッグアンドドロップ

ドラッグアンドドロップは、オブジェクトを取得し、後で別の場所にドラッグする一般的な機能です。

HTML5 では、ドラッグアンドドロップが標準の一部であり、あらゆる要素をドラッグアンドドロップできます。

Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari はドラッグをサポートしています。

注: Safari 5.1.2 はドラッグをサポートしていません。

例:

<!DOCTYPE html>  
<html>  
<head>  
    <title>拖放</title>  
    <style type="text/css">  
        #p1{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </style>  
    <script>  
        function allowDrop(ev) {  
            ev.preventDefault();  
        }  
        function drag(ev) {  
            ev.dataTransfer.setData("Text", ev.target.id);  
        }  
        function drop(ev) {  
            ev.preventDefault();  
            var data = ev.dataTransfer.getData("Text");  
            ev.target.appendChild(document.getElementById(data));  
        }  
    </script>  
</head>  
<body>  
    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
    <br />  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" />  
</body>  
</html>

ログイン後にコピー

まず、要素をドラッグ可能にするために、

draggable 属性を true に設定します。 = "true">次に、要素がドラッグされたときに何が起こるかを指定します。

上記の例では、

ondragstart 属性 は、ドラッグするデータを指定する関数、drag(event) を呼び出します。
dataTransfer.setData() メソッド は、ドラッグされたデータの データ型と値を設定します:

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

ログイン後にコピー

この例では、データ型は「Text」で、値はドラッグ可能な要素の ID ( 「ドラッグ1」)。

ondragover イベント は、ドラッグされたデータを配置する場所を指定します。 デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。これは、

ondragover イベントのevent.preventDefault()メソッドを呼び出すことによって行われます: event.preventDefault()ドラッグされたデータが配置されると、ドロップイベントが発生します。

上記の例では、ondrop 属性が関数を呼び出します。

drop(event):

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

ログイン後にコピー

コードの説明:

preventDefault() を呼び出して、ブラウザのデフォルトのデータ処理を回避します (drop デフォルトイベントの動作は、リンクとして開くことです)dataTransfer.getData("Text") メソッドを通じてドラッグされたデータを取得します
。このメソッドは、setData() メソッドと同じ型のデータセットを返します。ドラッグされたデータはドラッグされた要素のIDです(「drag1」)ドラッグされた要素を配置要素(ターゲット要素)に追加します

前後にドラッグします:

2つの間を前後にドラッグしたい場合上記のコードを少し変更するだけです。 本文のコードを次のように変更します。

<body>  
    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" /></p>  
    <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
</body>

ログイン後にコピー

次に、スタイルに #p2 を追加します。

<style type="text/css">  
        #p1,#p2{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </style>

ログイン後にコピー

このようにして、前後にドラッグアンドドロップできます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

ページングクエリの使用方法の詳細な説明

文字と数学関数の関係

以上がH5 を使用してドラッグアンドドロップ効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

H5 を使用してドラッグアンドドロップ効果を実現する方法

H5 を使用してドラッグ アンド ドロップ効果を実現する方法

H5 を使用してドラッグアンドドロップ効果を実現する方法