{"id":27710,"date":"2024-11-24T19:52:42","date_gmt":"2024-11-24T11:52:42","guid":{"rendered":"https:\/\/fwq.ai\/blog\/?p=27710"},"modified":"2024-11-24T19:52:42","modified_gmt":"2024-11-24T11:52:42","slug":"html5%e7%a7%8d%e7%9a%84%e6%8b%96%e6%94%be%e5%ae%9e%e4%be%8b","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/27710\/","title":{"rendered":"Html5\u79cd\u7684\u62d6\u653e\u5b9e\u4f8b"},"content":{"rendered":"<p>\u4e3e\u4f8b\u8bf4\u660e\uff1a<\/p>\n<p>&nbsp;<\/p>\n<pre>\uff0f\uff0fjs\u4ee3\u7801\r\n&lt;script&gt; \r\n\/\/ondragover \u4e8b\u4ef6\u89c4\u5b9a\u5728\u4f55\u5904\u653e\u7f6e\u88ab\u62d6\u52a8\u7684\u6570\u636e\u3002\r\n\/\/\u9ed8\u8ba4\u5730\uff0c\u65e0\u6cd5\u5c06\u6570\u636e\/\u5143\u7d20\u653e\u7f6e\u5230\u5176\u4ed6\u5143\u7d20\u4e2d\u3002\u5982\u679c\u9700\u8981\u8bbe\u7f6e\u5141\u8bb8\u653e\u7f6e\uff0c\u6211\u4eec\u5fc5\u987b\u963b\u6b62\u5bf9\u5143\u7d20\u7684\u9ed8\u8ba4\u5904\u7406\u65b9\u5f0f\u3002\r\n\/\/\u8fd9\u8981\u901a\u8fc7\u8c03\u7528 ondragover \u4e8b\u4ef6\u7684 event.preventDefault() \u65b9\u6cd5\uff1a\r\n\/\/\u8c03\u7528 preventDefault() \u6765\u907f\u514d\u6d4f\u89c8\u5668\u5bf9\u6570\u636e\u7684\u9ed8\u8ba4\u5904\u7406\uff08drop \u4e8b\u4ef6\u7684\u9ed8\u8ba4\u884c\u4e3a\u662f\u4ee5\u94fe\u63a5\u5f62\u5f0f\u6253\u5f00\uff09\r\nfunction allowDrop(ev) \r\n{ \r\n\u00a0\u00a0\u00a0 ev.preventDefault(); \r\n} \r\n\r\n\/\/ondragstart \u5c5e\u6027\u8c03\u7528\u4e86\u4e00\u4e2a\u51fd\u6570\uff0cdrag(event)\uff0c\u5b83\u89c4\u5b9a\u4e86\u88ab\u62d6\u52a8\u7684\u6570\u636e\u3002\r\n\/\/dataTransfer.setData() \u65b9\u6cd5\u8bbe\u7f6e\u88ab\u62d6\u6570\u636e\u7684\u6570\u636e\u7c7b\u578b\u548c\u503c\r\n\/\/\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6570\u636e\u7c7b\u578b\u662f \"Text\"\uff0c\u503c\u662f\u53ef\u62d6\u52a8\u5143\u7d20\u7684 id (\"drag1\")\u3002\r\nfunction drag(ev) \r\n{ \r\n\u00a0\u00a0\u00a0 ev.dataTransfer.setData(\"Text\",ev.target.id); \r\n} \r\n\r\n\/\/\u5f53\u653e\u7f6e\u88ab\u62d6\u6570\u636e\u65f6\uff0c\u4f1a\u53d1\u751f drop \u4e8b\u4ef6\u3002\r\n\/\/\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0condrop \u5c5e\u6027\u8c03\u7528\u4e86\u4e00\u4e2a\u51fd\u6570\uff0cdrop(event)\uff1a\r\n\/\/\u8c03\u7528 preventDefault() \u6765\u907f\u514d\u6d4f\u89c8\u5668\u5bf9\u6570\u636e\u7684\u9ed8\u8ba4\u5904\u7406\uff08drop \u4e8b\u4ef6\u7684\u9ed8\u8ba4\u884c\u4e3a\u662f\u4ee5\u94fe\u63a5\u5f62\u5f0f\u6253\u5f00\uff09\r\n\/\/\u901a\u8fc7 dataTransfer.getData(\"Text\") \u65b9\u6cd5\u83b7\u5f97\u88ab\u62d6\u7684\u6570\u636e\u3002\u8be5\u65b9\u6cd5\u5c06\u8fd4\u56de\u5728 setData() \u65b9\u6cd5\u4e2d\u8bbe\u7f6e\u4e3a\u76f8\u540c\u7c7b\u578b\u7684\u4efb\u4f55\u6570\u636e\u3002\r\n\/\/\u88ab\u62d6\u6570\u636e\u662f\u88ab\u62d6\u5143\u7d20\u7684 id (\"drag1\")\r\n\/\/\u628a\u88ab\u62d6\u5143\u7d20\u8ffd\u52a0\u5230\u653e\u7f6e\u5143\u7d20\uff08\u76ee\u6807\u5143\u7d20\uff09\u4e2d\r\nfunction drop(ev) \r\n{ \r\n\u00a0\u00a0\u00a0 ev.preventDefault(); \r\n\u00a0\u00a0\u00a0 var data=ev.dataTransfer.getData(\"Text\"); \r\n\u00a0\u00a0\u00a0 ev.target.appendChild(document.getElementById(data)); \r\n} \r\n&lt;\/script&gt;<\/pre>\n<pre>&lt;!--html \u4ee3\u7801--&gt;\r\n&lt;div id=\"div1\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"&gt;\r\n     &lt;!--\u4e3a\u4e86\u4f7f\u5143\u7d20\u53ef\u62d6\u52a8\uff0c\u628a draggable \u5c5e\u6027\u8bbe\u7f6e\u4e3a true --&gt;\r\n    &lt;img src=\"img_w3slogo.gif\" draggable=\"true\" ondragstart=\"drag(event)\" id=\"drag1\" \r\n      width=\"88\" height=\"31\"&gt;\r\n&lt;\/div&gt;\r\n&lt;div id=\"div2\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\"&gt;&lt;\/div&gt;<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u4e3e\u4f8b\u8bf4\u660e\uff1a &nbsp; \uff0f\uff0fjs\u4ee3\u7801 &lt;script&gt; \/\/ondragover \u4e8b\u4ef6\u89c4\u5b9a\u5728\u4f55\u5904\u653e\u7f6e\u88ab\u62d6\u52a8\u7684\u6570\u636e\u3002 \/\/\u9ed8\u8ba4\u5730\uff0c\u65e0\u6cd5\u5c06\u6570\u636e\/\u5143\u7d20\u653e\u7f6e\u5230\u5176\u4ed6\u5143\u7d20\u4e2d\u3002\u5982\u679c\u9700\u8981\u8bbe\u7f6e\u5141\u8bb8\u653e\u7f6e\uff0c\u6211\u4eec\u5fc5\u987b\u963b\u6b62\u5bf9\u5143\u7d20\u7684\u9ed8\u8ba4\u5904\u7406\u65b9\u5f0f\u3002 \/\/\u8fd9\u8981\u901a\u8fc7\u8c03\u7528 ondragover \u4e8b\u4ef6\u7684 event.preventDefault() \u65b9\u6cd5\uff1a \/\/\u8c03\u7528 preventDefault() \u6765\u907f\u514d\u6d4f\u89c8\u5668\u5bf9\u6570\u636e\u7684\u9ed8\u8ba4\u5904\u7406\uff08drop \u4e8b\u4ef6\u7684\u9ed8\u8ba4\u884c\u4e3a\u662f\u4ee5\u94fe\u63a5\u5f62\u5f0f\u6253\u5f00\uff09 function allowDrop(ev) { \u00a0\u00a0\u00a0 ev.preventDefault(); } \/\/ondragstart \u5c5e\u6027\u8c03\u7528\u4e86\u4e00\u4e2a\u51fd\u6570\uff0cdrag(event)\uff0c\u5b83\u89c4\u5b9a\u4e86\u88ab\u62d6\u52a8\u7684\u6570\u636e\u3002 \/\/dataTransfer.setData() \u65b9\u6cd5\u8bbe\u7f6e\u88ab\u62d6\u6570\u636e\u7684\u6570\u636e\u7c7b\u578b\u548c\u503c \/\/\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6570\u636e\u7c7b\u578b\u662f &#8220;Text&#8221;\uff0c\u503c\u662f\u53ef\u62d6\u52a8\u5143\u7d20\u7684 id (&#8220;drag1&#8221;)\u3002 function drag(ev) { \u00a0\u00a0\u00a0 ev.dataTransfer.setData(&#8220;Text&#8221;,ev.target.id); } \/\/\u5f53\u653e\u7f6e\u88ab\u62d6\u6570\u636e\u65f6\uff0c\u4f1a\u53d1\u751f drop \u4e8b\u4ef6\u3002 \/\/\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0condrop \u5c5e\u6027\u8c03\u7528\u4e86\u4e00\u4e2a\u51fd\u6570\uff0cdrop(event)\uff1a \/\/\u8c03\u7528 preventDefault() \u6765\u907f\u514d\u6d4f\u89c8\u5668\u5bf9\u6570\u636e\u7684\u9ed8\u8ba4\u5904\u7406\uff08drop \u4e8b\u4ef6\u7684\u9ed8\u8ba4\u884c\u4e3a\u662f\u4ee5\u94fe\u63a5\u5f62\u5f0f\u6253\u5f00\uff09 \/\/\u901a\u8fc7 dataTransfer.getData(&#8220;Text&#8221;) \u65b9\u6cd5\u83b7\u5f97\u88ab\u62d6\u7684\u6570\u636e\u3002\u8be5\u65b9\u6cd5\u5c06\u8fd4\u56de\u5728 setData() \u65b9\u6cd5\u4e2d\u8bbe\u7f6e\u4e3a\u76f8\u540c\u7c7b\u578b\u7684\u4efb\u4f55\u6570\u636e\u3002 \/\/\u88ab\u62d6\u6570\u636e\u662f\u88ab\u62d6\u5143\u7d20\u7684 id (&#8220;drag1&#8221;) \/\/\u628a\u88ab\u62d6\u5143\u7d20\u8ffd\u52a0\u5230\u653e\u7f6e\u5143\u7d20\uff08\u76ee\u6807\u5143\u7d20\uff09\u4e2d function [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-27710","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/27710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=27710"}],"version-history":[{"count":1,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/27710\/revisions"}],"predecessor-version":[{"id":27716,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/27710\/revisions\/27716"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=27710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=27710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=27710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}