Question

我在互联网上找到了这个代码，它在Firefox和Chrome上运行良好，但不能在IE上运行。任何身体都可以帮助我。非常感谢。

我已经完成了几乎我的项目，但坚持这个，请帮助我。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>drag-and-drop</title>
        <meta name="description" content="">
        <meta name="author" content="Suresh">

        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <style type="text/css">
            #left{height: 500px;padding: 10px;background-color: #ccc;float: left;width: 215px;margin-top: 10px;}
            #right{height: 500px;padding: 10px;background-color: #ccc;float: right;width: 680px;margin-top: 10px;}
        </style>
        <script src="kinetic-v5.0.1.js"></script>
        <script defer="defer"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            function allowDrop(ev){
                ev.preventDefault();
            }

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

            function dragStart(ev){
                ev.dataTransfer.setData("Text",ev.target.id);
                //$('#'+ev.target.id).click();
                //alert("dragStart");
            }

            function dropcopy(ev){
                ev.preventDefault();
                var data = ev.dataTransfer.getData("Text");
                var copyimg = document.createElement("img");
                var original = document.getElementById(data);
                copyimg.src = original.src;
                ev.target.appendChild(copyimg); 
                //alert("copy");
            }
        </script>
    </head>

    <body>
        <div id="site_content">
            <div id="left" ondrop="drop(event)" ondrag="allowDrop(event)" draggable="true" ondragstart="dragStart(event)">
                <ul id="left">
                    <li><img src="images/template-icon1.png" onclick="javascript: alert('1');" draggable="true" id="drag1" /></li>
                    <li><img src="images/template-icon2.png" draggable="true" id="drag2" /></li>
                    <li><img src="images/template-icon3.png" draggable="true" id="drag3" /></li>
                    <li><img src="images/template-icon4.png" draggable="true" id="drag4" /></li>
                </ul>
            </div>
            <div id="right" draggable="true" ondrop="dropcopy(event)" ondragover="allowDrop(event)">    
            </div>

            <div id="sidebar_container">

            </div>
        </div>
    </body>
</html>

Answer 1

尝试将第一个DIV的ondrag="allowDrop(event)"更改为ondragover="allowDrop(event)"。另外请记住，ID应该是唯一的，这意味着每页只能使用一个id，如果需要多次使用，则使用类。

动力学拖放

1 个答案: