Question

我遇到了一些问题，基本上我有一个从我的数据库生成对象的PHP代码，看起来有点像这样：

for ($i = 0; $i < $num_rows; $i++) 
            {
    list($news_id, $news_name, $news_img, $news_date, $news_link) = $result->fetch_row(); 

    echo '<tr>';
    echo '<td>'.$news_date.'</td>';
    echo '<td id="udrag'.$i.'"><a href="get_news.php?newsid='.$news_id.'" id="drag'.$news_id.'" draggable="true" ondragstart="drag(event)">'.$news_name.'</a></td>';
    echo '<td><img src="'.$news_img.'" style="width:50px" /></td>';
    echo '<td>'.$string1 = substr($news_link, 0, strpos($news_link, 'com')+2).'</td>';
    echo '</tr>';

    }

它从我的数据库获取所有新闻，将它们放入表中并添加一个href链接，您可以单击该链接以查看新闻。正如你所看到的，它也是可以拖延的。

现在我想要做的是，我想将其中一个链接拖到带有ondrop事件的p中，如下所示：

 <div id="boxUp"><p id="a1" ondrop="drop(event)" ondragover="allowDrop(event)">main news</p></div>

删除完成后，我想在段落里面拖动一个href元素，使它看起来像这样：

 <div id="boxUp"><p id="a1" ondrop="drop(event)" ondragover="allowDrop(event)"><a href="get_news.php?newsid=5" id="drag5" draggable="true" ondragstart="drag(event)">some news name</a></p></div>

我无法弄清楚我需要做些什么来获得这种效果，我的代码如下，有什么帮助吗？

function allowDrop(ev) 
{
    ev.preventDefault();
}

function drag(ev) 
{
    ev.dataTransfer.setData("Text",ev.target.id);
    var elo = ev.dataTransfer.getData("Text");  
}
function drop(ev) 
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    //ev.target.appendChild(document.getElementById(data).cloneNode(true));     
}

http://jsfiddle.net/Lzy5v/8/

Answer 1

你在使用setData后立即对drag事件使用了ev.dataTransfer.getData（'text'），看来你只能在drop事件上执行此操作，否则drop事件甚至不会被触发，删除你的“var” elo = ....“并取消注释掉落函数的最后一行并完成所有操作，我修改了你的jsfiddle以便你可以检查：

http://jsfiddle.net/Lzy5v/11/

    <div id="boxUp">
    <p id="a1" ondrop="drop(event)" ondragover="allowDrop(event)">
        Place to drag the news and change this p into the news after drop
    </p>
</div>

<a href="get_news.php?newsid=397" id="link" draggable="true" ondragstart="drag(event)">some news</a>

<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).cloneNode(true));       
    }
</script>

使用丢弃的href更改<p> </p>

1 个答案: