HTML5拖放

<!DOCTYPE HTML>
<html>
<head>

    <meta charset="UTF-8">
    <title>教程 www.jc2182.com</title>

    <style>
        #div1 {
            width: 250px;
            height: 300px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="/images/f3.jpg" draggable="true" ondragstart="drag(event)" width="250" height="300">
</body>
</html>

示例说明： 1，要使元素可拖动，请将该draggable属性设置为true：
<img draggable="true">

2，要拖动什么，ondragstart和setData()：指定拖动元素时应该发生的事情。在上面的示例中，该ondragstart属性调用一个函数drag(event)，该函数指定要拖动的数据。dataTransfer.setData()方法设置数据类型和拖动数据的值：

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

3，在这种情况下，数据类型是“text”，值是可拖动元素的id（“drag1”）。 3，要拖到哪里 - ondragover： ondragover事件指定可以删除拖动数据的位置。默认情况下，不能在其他元素中删除数据/元素。要允许删除，我们必须阻止元素的默认处理。这是通过调用event.preventDefault() ondragover事件的方法来完成的：
event.preventDefault()
4，删除拖动的数据时，会发生丢弃事件。在上面的例子中，ondrop属性调用一个函数drop(event)：

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

来回拖放的示例

<!DOCTYPE HTML>
<html>
<head>

    <meta charset="UTF-8">
    <title>教程（www.jc2182.com）</title>

    <style>
        #div1, #div2 {
            float: left;
            width: 250px;
            height: 300px;
            margin: 10px;
            padding: 10px;
            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>
<h2>拖放</h2>
<p>在两个div元素中来回拖放这张图片</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="/images/f2.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="250" height="300">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

更多高级的教程

HTML5拖放

web全栈

引用和评论

Python try...except

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

Base64编码的“暗坑”：解密失败？可能是这些原因！

原生electron起步-从零到一完成构建和打包

LRU算法，你别跑，我就要吃透你