HTML5 でドラッグアンドドロップを実装するためのサンプルコードを共有する-H5 チュートリアル-php.cn

HTML5 でドラッグアンドドロップを実装するためのサンプルコードを共有する

零下一度

リリース： 2017-05-04 15:36:47

オリジナル

2029 人が閲覧しました

html5では、APIインターフェースのドラッグアンドドロップがサポートされており、この機能を使用して、ブラウザと他のアプリケーションの間でデータをドラッグアンドドロップできます。この操作を実行するには、次の2つの手順を実行する必要があります。 1) ドラッグアンドドロップするオブジェクト
ラベルのdraggable属性をtrueに設定します。この方法では、タグをドラッグアンドドロップすることができます。また、img タグと a タグを true に指定する必要があり、デフォルトでドラッグアンドドロップが許可されます。 (2) ドラッグアンドドロップに関連するイベント処理
コードを記述します。よく使用される再生イベントは次のとおりです: ドラッグスタートはドラッグアンドドロップ操作を開始しますドラッグドラッグアンドドロッププロセス中に
ドラッグアンドドロップされたラベルの入力が開始されます。このラベルのスコープ
ドラッグオーバードラッグされたラベルはこのラベルのスコープ内で移動します
ドラッグリーブドラッグされたラベルはこのラベルのスコープを離れます
ドロップ他のラベルがこのラベルにドラッグアンドドロップされます
ドラッグエンドドラッグアンドドロップ操作が終了します

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖放</title>
<script type="text/javascript">
function init() 
{
    // (1) 拖放开始
    source.addEventListener("dragstart", function(ev) 
    {
       //(1) 向dataTransfer对象追加数据
        var dt = ev.dataTransfer;
        dt.effectAllowed = &#39;all&#39;;    
       //(2) 拖动元素为dt.setData("text/plain", this.id); 
        dt.setData("text/plain", "你好"); 
    }, false);
      // (3) dragend：拖放结束
    dest.addEventListener("dragend", function(ev) 
    {
        //不执行默认处理（拒绝被拖放）
        ev.preventDefault();
     }, false);
    // (4) drop:被拖放
    dest.addEventListener("drop", function(ev) 
    {
        // 从DataTransfer对象那里取得数据
        var dt = ev.dataTransfer;
        //(5) 不执行默认处理（拒绝被拖放）
        ev.preventDefault();
        //停止事件传播
        ev.stopPropagation();
    }, false);
}
</script>
</head>
<body onload="init()">
<h5>请拖放</h5>
</html>

ログイン後にコピー

上記のコードでは、ページが読み込まれるときに inint() イベントが自動的にトリガーされます。このイベントには、ドラッグの開始、ドラッグアンドドロップされる、ドラッグの終了という 3 つの機能が含まれます。ブラウザで Web ページを開き、マウスをドラッグして Web ページに夜の写真を表示すると、Web ページに必要なコンテンツが自動的に読み込まれます。

【関連おすすめ】

無料のh5オンラインビデオチュートリアル

php.cnオリジナルのhtml5ビデオチュートリアル

以上がHTML5 でドラッグアンドドロップを実装するためのサンプルコードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。