Question

这是一个非常基本的问题，因为我是一个非常基本的编码器：）

我正在使用HTML5中的拖放功能

一切都很好，直到打开URL（在同一个窗口中）...图像是可拖动的，拖放工作正常。但...

如何让浏览器打开与另一个元素中删除的元素相关联的URL，以及如何将该URL与该元素相关联？

更清楚。在主页上我有一个图库。对于每个图像，我需要关联一个不同的URL（我只是把它放在id？）。就在画廊下面有一个盒子。当我在此框中拖放图像时，浏览器需要打开一个特定的链接。

谢谢！

乔瓦尼

Answer 1

将您的链接放在您的数据上并将其加载到drop事件上，如下所示：

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            #div1, #div2
            {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
        </style>
    <script>
        function allowDrop(ev)
        {
            ev.preventDefault();
        }

        function drag(ev)
        {
            ev.dataTransfer.setData("Url","http://www.google.fr");
        }

        function drop(ev)
        {
            ev.preventDefault();
            window.location=ev.dataTransfer.getData("Url");
        }
    </script>
    </head>
    <body>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
         <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </body>
</html>

Answer 2

将event.preventDefault（）放入放置函数或所有拖放函数中

function drop(e)
{
    e.preventDefault();
    // Code...
}

打开网址

2 个答案: