javascript - HTML & CSS : Dragging and drop in multiple directions

标签 javascript css html

到目前为止,我已经设法实现了一个简单的拖放功能。它允许用户将图像从一个 div 拖到另一个 div 中。这是代码:

<!DOCTYPE html>
<html>
    <head> 
        <title> The New Dashboard </title>
        <style>

            #div1 {width:1000px;height:500px;padding:10px;border:1px solid #aaaaaa;}
            #top {width:1000px;height:100px;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 = "top" ondrop="drop(event)" ondragover="allowDrop(event">

            <img id = "drag1" src="slwheel.png" draggable="true" ondragstart="drag(event)">
        </div>


        <div id = "div1" ondrop="drop(event)" ondragover="allowDrop(event)">


        </div>
    </body>


</html>

现在我想将 slwheel 图像从其在#div1 div 中的新位置拖回#top div,但它不允许我这样做。我究竟做错了什么?任何帮助都将不胜感激。谢谢!

最佳答案

在 allowDrop(event) 中你错过了 )

关于javascript - HTML & CSS : Dragging and drop in multiple directions,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30580951/

相关文章:

javascript - 如何从2个数组中获取总和结果并将其拆分为多个输入?

javascript - 如果段落中只有一行,如何隐藏/显示 'more' 按钮

css - 巨大的 Css 文件有大量的 unsed 规则

html - 如何使用 AngularJS 在 Popover 中显示和隐藏 <div>

javascript - 模块化和抽象 react 组件功能

jquery - 如何将搜索框放在轮播的顶部?

javascript - 使用 "Hidden Form"验证电子邮件?

javascript - 使用 Jquery 自定义 ui 对话框中的函数调用打印第二组值

javascript - 在javascript中自定义排序

javascript - 如何仅在特定媒体查询上使用 jquery .css()?