html实现拖动的完整代码
程序员文章站
2022-04-12 23:19:04
...
本篇文章给大家带来的内容是关于css中flaot浮动的原因及带来的问题分析 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>drag</title> <style type="text/css"> #p1{ width :100px; height :30px; border:1px solid red; } </style> <script type="text/javascript"> 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)); } </script> </head> <body> <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p> <br> <p id="drag1" draggable="true" ondragstart="drag(event)" >鎷栧姩</p> </body> </html>
相关推荐:
以上就是html实现拖动的完整代码的详细内容,更多请关注其它相关文章!