https://jeremy-ho.vercel.app/assets/js/868aa0a8.477d80fb.js

1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[3264],{28453:(e,n,r)=>{r.d(n,{R:()=>d,x:()=>l});var t=r(96540);const s={},i=t.createContext(s);function d(e){const n=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),t.createElement(i.Provider,{value:n},e.children)}},97501:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>d,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"series/iThome_2024/day_28","title":"Day 28 - \u5143\u7d20\u62d6\u62c9\u79fb\u52d5","description":"\u56b4\u683c\u4f86\u8b1b\uff0c\u9019\u500b\u6548\u679c\u5176\u5be6\u4e0d\u5e72 CSS \u7684\u4e8b\uff0c\u5b83\u5176\u5be6\u662f\u9760 HTML5 \u7684 draggable \u5c6c\u6027\u548c JavaScript \u4f86\u5be6\u73fe\u7684\u3002","source":"@site/docs/series/01-iThome_2024/28-day_28.mdx","sourceDirName":"series/01-iThome_2024","slug":"/series/iThome_2024/day_28","permalink":"/docs/series/iThome_2024/day_28","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedAt":1766374113000,"sidebarPosition":28,"frontMatter":{"title":"Day 28 - \u5143\u7d20\u62d6\u62c9\u79fb\u52d5"},"sidebar":"series","previous":{"title":"Day 27 - \u6d6e\u96d5\u6548\u679c","permalink":"/docs/series/iThome_2024/day_27"},"next":{"title":"Day 29 - \u8f2a\u64ad (Carousel)","permalink":"/docs/series/iThome_2024/day_29"}}');var s=r(74848),i=r(28453);const d={title:"Day 28 - \u5143\u7d20\u62d6\u62c9\u79fb\u52d5"},l=void 0,a={},c=[{value:"\u5148\u770b\u770b code",id:"\u5148\u770b\u770b-code",level:2},{value:"\u89e3\u6790",id:"\u89e3\u6790",level:2},{value:"HTML",id:"html",level:3},{value:"CSS",id:"css",level:3},{value:"JavaScript",id:"javascript",level:3}];function o(e){const n={br:"br",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:["\u56b4\u683c\u4f86\u8b1b\uff0c\u9019\u500b\u6548\u679c\u5176\u5be6\u4e0d\u5e72 CSS \u7684\u4e8b\uff0c\u5b83\u5176\u5be6\u662f\u9760 HTML5 \u7684 ",(0,s.jsx)(n.code,{children:"draggable"})," \u5c6c\u6027\u548c JavaScript \u4f86\u5be6\u73fe\u7684\u3002",(0,s.jsx)(n.br,{}),"\n","\u4f46\u56e0\u70ba\u5df2\u7d93 28 \u5929\u4e86\uff0c\u6211\u5be6\u5728\u4e5f\u60f3\u4e0d\u51fa\u6709\u4ec0\u9ebc\u5e38\u7528\u7684 CSS \u7279\u6548\u4e86\uff0c\u4e7e\u8106\u5c31\u653e\u4e00\u4e0b\u9019\u7a2e\u597d\u50cf\u4e5f\u7a0d\u5fae\u5e38\u7528\u5230\u7684\u4e00\u4e9b\u7db2\u9801\u4e92\u52d5\u6548\u679c\u3002",(0,s.jsx)(n.br,{}),"\n","(OS: \u672c\u4f86\u4eca\u5929\u5b89\u6392\u662f\u505a",(0,s.jsx)(n.strong,{children:"\u5206\u9694\u7dda"}),"\u7684\uff0c\u4f46\u90a3\u500b\u5beb\u51fa\u4f86\u611f\u89ba\u6703\u662f\u6211 28 \u5929\u4f86\u6700\u6c34\u6587\u7684\u4e00\u6b21 www)"]}),"\n",(0,s.jsx)(n.h2,{id:"\u5148\u770b\u770b-code",children:"\u5148\u770b\u770b code"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-html",children:'<div class="container" id="containerA">\n <h2>Container A</h2>\n <div class="draggable" id="draggable" draggable="true">\n  \u62d6\u62c9\u6211\uff01\n </div>\n</div>\n\n<div class="container" id="containerB">\n <h2>Container B</h2>\n</div>\n'})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:".container {\n width: 300px;\n height: 300px;\n border: 2px dashed #ccc;\n display: inline-block;\n vertical-align: top;\n margin-right: 20px;\n text-align: center;\n padding-top: 20px;\n}\n\n.draggable {\n width: 150px;\n height: 150px;\n background-color: #8e44ad; /* \u7d2b\u8272 */\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 10px;\n cursor: grab;\n user-select: none;\n}\n\n.draggable:active {\n cursor: grabbing;\n}\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-javascript",children:'const draggable = document.getElementById("draggable");\nconst containerA = document.getElementById("containerA");\nconst containerB = document.getElementById("containerB");\n\n// \u7576\u5143\u7d20\u958b\u59cb\u88ab\u62d6\u52d5\ndraggable.addEventListener("dragstart", (e) => {\n e.dataTransfer.setData("text/plain", e.target.id);

1 // \u50b3\u905e\u88ab\u62d6\u52d5\u5143\u7d20\u7684ID\n});\n\n// \u8a31\u53ef\u5bb9\u5668A\u548c\u5bb9\u5668B\u90fd\u53ef\u4ee5\u653e\u7f6e\u5143\u7d20\nfunction allowDrop(event) {\n event.preventDefault(); // \u5fc5\u9808\u963b\u6b62\u9810\u8a2d\u884c\u70ba\u4f86\u5141\u8a31\u653e\u7f6e\n}\n\n// \u7576\u5143\u7d20\u88ab\u653e\u7f6e\nfunction handleDrop(event, targetContainer) {\n event.preventDefault();\n const draggableId = event.dataTransfer.getData("text");\n const draggableElement = document.getElementById(draggableId);\n targetContainer.appendChild(draggableElement); // \u5c07\u5143\u7d20\u653e\u5230\u76ee\u6a19\u5bb9\u5668\n}\n\n// \u5141\u8a31 A \u548c B \u5bb9\u5668\u63a5\u53d7\u62d6\u653e\ncontainerA.addEventListener("dragover", allowDrop);\ncontainerB.addEventListener("dragover", allowDrop);\n\n// \u5728 A \u548c B \u5bb9\u5668\u4e0a\u653e\u7f6e\u5143\u7d20\ncontainerA.addEventListener("drop", (e) => handleDrop(e, containerA));\ncontainerB.addEventListener("drop", (e) => handleDrop(e, containerB));\n'})}),"\n",(0,s.jsx)("iframe",{height:"600",width:"100%",title:"Untitled",src:"https://codepen.io/ChungYingHo/embed/mdZaNje?default-tab=html%2Cresult",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true",children:(0,s.jsxs)(n.p,{children:["See the Pen ",(0,s.jsx)("a",{href:"https://codepen.io/ChungYingHo/pen/mdZaNje",children:"\nUntitled"})," by ChungYingHo (",(0,s.jsx)("a",{href:"https://codepen.io/ChungYingHo",children:"@ChungYingHo"}),")\non ",(0,s.jsx)("a",{href:"https://codepen.io",children:"CodePen"}),"."]})}),"\n",(0,s.jsx)(n.h2,{id:"\u89e3\u6790",children:"\u89e3\u6790"}),"\n",(0,s.jsx)(n.p,{children:"\u6211\u5011\u5f9e HTML \u958b\u59cb\u4e00\u9805\u4e00\u9805\u4f86\u89e3\u6790\u9019\u500b\u62d6\u62c9\u79fb\u52d5\u6548\u679c\u7684\u95dc\u9375\u3002"}),"\n",(0,s.jsx)(n.h3,{id:"html",children:"HTML"}),"\n",(0,s.jsxs)(n.p,{children:["\u5728 HTML \u4e2d\uff0c\u6211\u5011\u5fc5\u9808\u8981\u7d66\u9810\u8a08\u8981\u62d6\u62c9\u7684\u5143\u7d20\u52a0\u4e0a ",(0,s.jsx)(n.code,{children:'draggable="true"'})," \u5c6c\u6027\uff0c\u9019\u6a23\u700f\u89bd\u5668\u624d\u6703\u77e5\u9053\u9019\u500b\u5143\u7d20\u662f\u53ef\u4ee5\u88ab\u62d6\u62c9\u7684\u3002"]}),"\n",(0,s.jsx)(n.h3,{id:"css",children:"CSS"}),"\n",(0,s.jsxs)(n.p,{children:["\u96d6\u8aaa CSS \u4e0d\u662f\u9019\u500b\u6548\u679c\u7684\u4e3b\u8981\u8a2d\u5b9a\uff0c\u4f46\u4f60\u4ed4\u7d30\u89c0\u5bdf\u6703\u767c\u73fe\u6211\u5728\u9810\u8a08\u88ab\u62d6\u62c9\u7684\u5143\u7d20 ",(0,s.jsx)(n.code,{children:".draggable"})," \u4e0a\u8a2d\u5b9a\u4e86 ",(0,s.jsx)(n.code,{children:"user-select: none;"}),"\uff0c\u9019\u662f\u70ba\u4e86\u907f\u514d\u4f7f\u7528\u8005\u9078\u53d6\u6642\u9078\u5230\u9019\u500b\u5143\u7d20\u5167\u90e8\u7684\u6587\u5b57\u800c\u5f71\u97ff\u62d6\u62c9\u6548\u679c\u3002"]}),"\n",(0,s.jsx)(n.h3,{id:"javascript",children:"JavaScript"}),"\n",(0,s.jsx)(n.p,{children:"JavaScript \u662f\u5b8c\u6210\u9019\u500b\u6548\u679c\u7684\u95dc\u9375\uff0c\u6211\u5011\u518d\u628a JavaScript \u7684\u90e8\u5206\u5206\u6210\u5e7e\u500b\u90e8\u5206\u4f86\u89e3\u6790\uff1a"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:[(0,s.jsx)(n.code,{children:"dragstart"})," \u4e8b\u4ef6"]})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"\u89f8\u767c\u6642\u6a5f"}),"\uff1a\u7576\u5143\u7d20\u958b\u59cb\u88ab\u62d6\u52d5\u6642\u3002"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"\u529f\u80fd"}),"\uff1a\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:'e.dataTransfer.setData("text/plain", e.target.id);'})," \u5c07\u88ab\u62d6\u52d5\u5143\u7d20\u7684 ID \u5b58\u5132\u5230\u62d6\u52d5\u64cd\u4f5c\u7684\u6578\u64da\u50b3\u8f38\u5c0d\u8c61\u4e2d\uff0c\u4ee5\u4fbf\u5728\u653e\u7f6e\u64cd\u4f5c\u4e2d\u6aa2\u7d22\u9019\u500b ID\u3002"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:[(0,s.jsx)(n.code,{children:"dragover"})," \u4e8b\u4ef6"]})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"\u89f8\u767c\u6642\u6a5f"}),"\uff1a\u7576\u62d6\u52d5\u5143\u7d20\u5728\u76ee\u6a19\u5bb9\u5668\u4e0a\u65b9\u6642\u3002"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"\u529f\u80fd"}),"\uff1a\u5fc5\u9808\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"event.preventDefault();"})," \u4f86\u963b\u6b62\u9810\u8a2d\u884c\u70ba\uff0c\u5141\u8a31\u653e\u7f6e\u64cd\u4f5c\u3002\u700f\u89bd\u5668\u7684\u9810\u8a2d\u884c\u70ba\u901a\u5e38\u662f\u4e0d\u5141\u8a31\u62d6\u653e\u64cd\u4f5c\u7684\uff0c\u56e0\u6b64\u9700\u8981\u986f\u5f0f\u963b\u6b62\u9810\u8a2d\u884c\u70ba\u3002"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:[(0,s.jsx)(n.code,{children:"drop"})," \u4e8b\u4ef6"]})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"\u89f8\u767c\u6642\u6a5f"}),"\uff1a\u7576\u62d6\u52d5\u5143\u7d20\u88ab\u653e\u7f6e\u5230\u76ee\u6a19\u5bb9\u5668\u4e2d\u6642\u3002"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"\u529f\u80fd"}),"\uff1a","\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:'event.dataTransfer.getData("text");'})," \u4f86\u7372\u53d6\u62d6\u52d5\u5143\u7d20\u7684 ID\u3002"]}),"\n",(0,s.jsxs)(n.li,{children:["\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"document.getElementById(draggableId)"})," \u4f86\u7372\u53d6\u5c0d\u61c9\u7684 DOM \u7bc0\u9ede\u3002"]}),"\n",(0,s.jsxs)(n.li,{children:["\u4f7f\u7528 ",(0,s.jsx)(n.code,{children:"targetContainer.appendChild(draggableElement);"})," \u5c07\u5143\u7d20\u6dfb\u52a0\u5230\u76ee\u6a19\u5bb9\u5668\u4e2d\u3002"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"\u88dc\u5145\u8aaa\u660e"})}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsxs)(n.strong,{children:[(0,s.jsx)(n.code,{children:"dataTransfer"})," \u5c0d\u8c61"]}),"\uff1a\u7528\u4f86\u5728\u62d6\u653e\u64cd\u4f5c\u4e2d\u50b3\u9

105e\u6578\u64da\uff0c\u5305\u62ec\u62d6\u52d5\u7684\u5167\u5bb9\u548c\u76ee\u6a19\u5bb9\u5668\u3002"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:(0,s.jsx)(n.code,{children:"e.target.id"})}),"\uff1a\u7528\u4f86\u7372\u53d6\u88ab\u62d6\u52d5\u5143\u7d20\u7684 ID\u3002\u9019\u5728 ",(0,s.jsx)(n.code,{children:"dragstart"})," \u4e8b\u4ef6\u4e2d\u8a2d\u7f6e\uff0c\u4ee5\u4fbf\u5728 ",(0,s.jsx)(n.code,{children:"drop"})," \u4e8b\u4ef6\u4e2d\u80fd\u5920\u627e\u5230\u9019\u500b\u5143\u7d20\u3002"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:(0,s.jsx)(n.code,{children:"event.preventDefault()"})}),"\uff1a\u5728 ",(0,s.jsx)(n.code,{children:"dragover"})," \u4e8b\u4ef6\u4e2d\u8abf\u7528\uff0c\u78ba\u4fdd\u76ee\u6a19\u5bb9\u5668\u80fd\u5920\u63a5\u53d7\u62d6\u52d5\u5143\u7d20\u3002"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(o,{...e})}):o(e)}}}]);