javascript - Changing <p> with a dropped href -

I have a problem, basically I have a PHP code that generates objects from my database, it looks like That: ($ I = 0; $ i + lt; $ num_rows; $ i ++) {list ($ news_id, $ news_name, $ news_img, $ news_date, $ news_link) = $ results-> and for

 ; Fetch_row (); Echo '& lt; Tr & gt; '; Echo & lt; Td> '$ News_date.' & Lt; / Td> '; Echoes' & lt; Td id = "udrag". $ I. '& Gt; & Lt; A href = "get_news.php? Newsid = '. $ News_id.'" Id = "drag". $ News_id. " "Draggable =" true "ondragstart =" drag (event) "& gt; '. $ News_name.' & Lt; / a & gt; & lt; / td> '; Echo' & lt; td & gt; & lt; img src = "'. $ News_img 'Style = "width: 50px" /> gt; & lt; / td & gt;'; resonant '& lt; td & gt;' $ string1 = substr ($ news_link, 0, strokes ($ news_link, Com ') + 2).' & Lt; / td & gt; '; echo & lt; / tr & gt;';}  

This receives all the news from my database Puts them in the table, and adds a href link that you can click to view the news. As you can see, it is also dragable.

Now what you are trying to do That's it, I'm one of those links I want to drag from the oderop event into an app such as:

After the drop has ended, I want to draw an href element inside of it so that it looks like this:

I can not understand what I have to do to get this effect, my code is like this, any help?

  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));}  

You have to set ev.dataTransfer.getData ('text') immediately after the drag event, it seems that you can do this only on the drop event or else you will not be able to remove the drop event, your "var elo = .... "and the last line was all done for your drop function, I modified your jsfiddle so that you can check:

  & lt ; Div id = "boxUp" & gt; & Lt; P id = "a1" ondrop = "drop (event)" ondragover = "allowdrop (event)" & gt; Keep the news to drag and change this page in the news after drop & lt; / P & gt; & Lt; / Div & gt; & Lt; A href = "get_news.php? Newsid = 397" id = "link" draggable = "true" ondragstart = "drag (event)" & gt; Some news & lt; / A & gt; & Lt; Script & gt; 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)); } & Lt; / Script & gt;