话不多说，我们直接来看下面的示例
代码如下
drophyperlink.css
.droparea { margin-top:8px; margin-bottom:8px; width:320px; height:64px; background-color:#fff2a7; border: 1px solid #ff6a00;}.longtextbox{ width:80%;}
drophyperlink.html
<!doctype html><html><head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="drophyperlink.css" /> <script type="text/javascript"> function load() { var droparea = document.getelementbyid('linkdroparea'); droparea.addeventlistener('dragover', ondragover, false); droparea.addeventlistener('drop', ondrop, false); } function ondragover(event) { //event.stoppropagation(); event.preventdefault(); event.datatransfer.dropeffect = 'link'; } function ondrop(event) { var url = event.datatransfer.getdata("text"); var textbox = document.getelementbyid('outputtextbox'); textbox.value = url; } </script></head><body onload="load();"> <div id="linkdroparea" class="droparea">把超链接拖到这里</div> <input id="outputtextbox" class="longtextbox" type="text"/></body></html>
说明：
可以在id = linkdroparea的div框中打开网页浏览器的链接。要接受drop，要对框架的元素进行dragode事件处理。在事件处理过程中，调用preventdefault（）并阻止未接收默认拖动的操作。同时将其设置为datatransfer.dropeffect。drop事件处理程序还调用datatransfer.getdata（“text”）方法来获取元素的文本数据。在链接的情况下，在链接的情况下，存储的元素的文本数据中存储了链接的url。获取的url的字符串将显示在屏幕底部的文本框中。
运行结果
然后准备另一个web浏览器窗口，拖动web浏览器上显示的页面中的超链接，并将其放在页面上的拖放区域中。
比如拖动“前端开发”，那么结果如下图所示
以上就是javascript实现网页中指定区域的超链接转换为url的详细内容。