Изменение <p> с выпавшим href

У меня проблемы, в основном у меня есть 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, которую вы можете щелкнуть, чтобы увидеть новости. Как вы можете видеть, это также перетаскивается.

Теперь, что я пытаюсь сделать, я хочу перетащить одну из этих ссылок в ap с событием ondrop, например:

 <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/