HTML 5ドラッグ＆ドロップ、スワップ位置

21258 ワード

要素をドラッグ＆ドロップ可能に設定

draggable       true:

    <img draggable="true" />

何をドラッグしますか-ondragstartとsetData()

dataTransfer.setData()                :

    function drag(e) { e.dataTransfer.setData("text/html", value); }
 ："text/html"  ，  Mac  Safari  ，         ，     html text      。

どこに置くか-ondragover

ondragover                。
   ，     /          。          ，                。

　　event.preventDefault();

配置を行う-ondrop

   preventDefault()               （drop                ）    dataTransfer.getData("text/html")          。        setData()                。 function drop(e) { e.preventDefault(); }

ブラウザのサポート

Internet Explorer 9、Firefox、Opera 12、Chrome    Safari 5     。   ：  Safari 5.1.2       。

例:
Example1:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }
    .drag {
        width: 50px;
        height: 50px;
        background: blue;
        display: inline-block;
        margin: 10px;
        color: white;
        font-size: 20px;
        text-align: center;
        line-height: 50px;
        cursor: move;
    }
    style>
head>

<body>
    <div class="drag drag1" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">1div>
    <div class="drag drag2" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">2div>
    <div class="drag drag3" draggable="true" ondragstart="drag(event, this)" ondragover="allowDrop(event)" ondrop="drop(event,this)">3div>

    <script type="text/javascript">
        var srcEl = null;
        function drag(e, el) {
            srcEl = el;
            e.dataTransfer.setData("text/html", el.innerHTML);
        }
        function drop(e, el){
            e.preventDefault();
            // e.stopPropagation();
            if (srcEl != el) {
                srcEl.innerHTML = el.innerHTML;
                el.innerHTML = e.dataTransfer.getData("text/html");
            }
        }
        function allowDrop(e) {
            e.preventDefault();
        }
    script>
body>

html>

Example2:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }

    #div1 {
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }

    #drag1 {
        width: 300px;
        height: 300px;
    }
    style>
head>

<body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div>
    <img id="drag1" draggable="true" ondragstart="drag(event)"
        src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=175152409,3501278703&fm=27&gp=0.jpg" />
    <script type="text/javascript">
    function drag(e) {
        e.dataTransfer.setData("text/html", e.target.id);
    }

    function drop(e) {
        e.preventDefault();
        e.stopPropagation();
        var id = e.dataTransfer.getData('text/html');
        e.target.appendChild(document.getElementById(id));
    }

    function allowDrop(e) {
        e.preventDefault();
    }
    script>
body>

html>

W 3 school原文リンク:http://www.w3school.com.cn/html5/html_5_draganddrop.asp

HTML標準で廃棄された<br>タブ

JavaScriptはHTML 5 canvasに基づいてテキストが占有する画素幅を取得する