HTML5 ドラッグアンドドロップ

ドラッグアンドドロップ

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

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

1. HTML5 ドラッグアンドドロップ

ドラッグアンドドロップ (ドラッグアンドドロップ) は HTML5 標準の一部です。

2. ドラッグスタート

ondragstart: ドラッグしたデータを指定する関数drag(イベント)を呼び出します

3. ドラッグしたデータを設定します

setData(): ドラッグしたデータを設定しますデータの値。

4. 配置

ondragover: イベントは、ドラッグされたデータを配置する場所を指定します。

5. 配置

ondrop: ドラッグされたデータが配置されると、ドロップイベントが発生します

概要:

ドラッグターゲット (ソース要素) でイベントをトリガーします:

ondragstart: ユーザーがドラッグを開始しますelement トリガーされるタイミング
ondrag: 要素がドラッグされているときにトリガーされる
ondragend: ユーザーが要素のドラッグを完了した後にトリガーされる

ターゲットが解放されたときにトリガーされるイベント

ondragenter: このイベントは、マウスでドラッグされたオブジェクトがそのコンテナーのスコープに入ったときにトリガーされます
ondragover: このイベントは、ドラッグされたオブジェクトが別のオブジェクトのコンテナーのスコープ内にドラッグされたときにトリガーされます
ondragleave: このイベントは、マウスでドラッグされたオブジェクトがコンテナのスコープから出るときにトリガーされます
ondrop: このイベントは、ドラッグプロセス中にマウスボタンが放されたときにトリガーされます

ドラッグアンドドロップインスタンス:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drop</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
        }
        #box1{
            float: left;
            background-color: #CCCCCC;
        }
        #box2{
            float: left;
            background-color: aqua;
        }
    </style>
    <script> var box1Div, msgDiv, img1, box2Dib;
    window.onload = function () {
        box1Div = document.getElementById("box1");
        msgDiv = document.getElementById("msg");
        img1 = document.getElementById("img1");
        box2Div = document.getElementById("box2");
        box1Div.ondragover = function (e) {
            e.preventDefault();
        }
        box2Div.ondragover = function (e) {
            e.preventDefault();
        }
        img1.ondragstart = function (e) {
            e.dataTransfer.setData("imgId","img1");
        }
        box1Div.ondrop = dropImghandler;
        box2Div.ondrop = dropImghandler;
        function dropImghandler(e) {
            //创建节点
 var img = document.getElementById(e.dataTransfer.getData("imgId"));
            e.target.appendChild(img);
        }
    }
    function showObj(obj) {
        var s = "";
        for(var k in obj){
            s+=k+":"+obj[k]+"<br/>";
        }
        msgDiv.innerHTML = s;
    }</script>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="http://img4.imgtn.bdimg.com/it/u=4240085321,3307603809&fm=21&gp=0.jpg" alt="">
<div id="msg"></div>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>drop</title> <style> .box{ width: 400px; height: 400px; } #box1{ float: left; background-color: #CCCCCC; } #box2{ float: left; background-color: aqua; } </style> <script> var box1Div, msgDiv, img1, box2Dib; window.onload = function () { box1Div = document.getElementById("box1"); msgDiv = document.getElementById("msg"); img1 = document.getElementById("img1"); box2Div = document.getElementById("box2"); box1Div.ondragover = function (e) { e.preventDefault(); } box2Div.ondragover = function (e) { e.preventDefault(); } img1.ondragstart = function (e) { e.dataTransfer.setData("imgId","img1"); } box1Div.ondrop = dropImghandler; box2Div.ondrop = dropImghandler; function dropImghandler(e) { //创建节点 var img = document.getElementById(e.dataTransfer.getData("imgId")); e.target.appendChild(img); } } function showObj(obj) { var s = ""; for(var k in obj){ s+=k+":"+obj[k]+"<br/>"; } msgDiv.innerHTML = s; }</script> </head> <body> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <img id="img1" src="http://img4.imgtn.bdimg.com/it/u=4240085321,3307603809&fm=21&gp=0.jpg" alt=""> <div id="msg"></div> </body> </html>

提出するリセットコード

自動運転