html5，css 實現拖拽效果。
阿新 • • 發佈：2020-12-19
技術標籤：Cssjs (JavaScript)css佈局模板
效果圖：
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width:50px; height:200px; padding:10px; border:1px solid #aaaaaa; text-align: center; } .flex_center{ display: flex; justify-content: center; align-items: center; padding:10px; } </style> </head> <body> <div style="display: flex;"> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"> <div id="drag1" draggable="true" ondragstart="drag(event)" >蘋果</div> <div id="drag2" draggable="true" ondragstart="drag(event)" >香蕉</div> <div id="drag3" draggable="true" ondragstart="drag(event)" >梨子</div> </div> <div class="flex_center"> <button><==></button> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"> <div id="drag4" draggable="true" ondragstart="drag(event)" >生菜</div> <div id="drag5" draggable="true" ondragstart="drag(event)" >茼蒿</div> </div> </div> </body> </html> <script src="./jquery.3.2.1.min.js"></script> <script> function allowDrop(event){ console.log("拖拽移動到可放置容器內部"); event.preventDefault(); } function drag(event){ console.log("開始拖拽",event); event.dataTransfer.setData("Text",event.target.id); } function drop(event){ console.log("放置",event); event.preventDefault(); var data=event.dataTransfer.getData("Text"), box=$(event.target); if(box.hasClass("box")){ //放置的位置是容器 box.append($("#"+data)); }else{ //放置的位置是容器內部的元素身上 box.after($("#"+data)); } } </script>