每天一個JavaScript執行個體-html5拖拽，javascript-html5
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>每天一個JavaScript執行個體-html5拖拽</title><style>#drop{width:300px;height:200px;background-color:#f00;padding:5px;border:2px solid #000;}#item{width:100px;height:100px;background-color:#ff0;padding:5px;margin:20px;border:1px solid #000;}*[draggable=true]{-moz-user-select:none;-khtml-user-drag:element;cursor:move;}*:-khtml-drag{background-color:rgba(238,238,238,0.5);}</style><script>function listenEvent(eventTarget,eventType,eventHandler){if(eventTarget.addEventListener){eventTarget.addEventListener(eventType,eventHandler,false);}else if(eventTarget.attachEvent){eventType = "on" + eventType;eventTarget.attachEvent(eventType,eventHandler);}else{eventTarget["on" + eventType] = eventHandler;}}//取消事件function cancelEvent (event){console.log("取消事件");if(event.preventDefault){event.preventDefault();}else{event.returnValue = false;}}//取消傳遞function cancelPropagation(event){console.log("取消傳遞");if(event.stopPropagation){event.stopPropagation();}else{event.cancelBubble = true;}}function dragOver(evt){console.log("拖拽進入地區");if(evt.preventDefault) evt.preventDefault();evt = evt || window.event;evt.dataTransfer.dropEffect = 'copy';return false;}window.onload = function(){console.log("程式就緒");//console.log(target);var item = document.getElementById("item");item.setAttribute("draggable","true");//console.log(item);listenEvent(item,"dragstart",function(evt){console.log("拖拽開始");evt = evt || window.event;evt.dataTransfer.effectAllowed = 'copy';evt.dataTransfer.setData("Text",item.id);});var target = document.getElementById("drop");listenEvent(target,"dragenter",cancelEvent);listenEvent(target,"dragover",dragOver);listenEvent(target,"drop",function(evt){console.log("drop");cancelPropagation(evt);evt = evt || window.event;evt.dataTransfer.dropEffect = 'copy';var id = evt.dataTransfer.getData("Text");target.appendChild(document.getElementById(id));});};</script></head><body><div><p>Drag the small yellow box with hte dash border to the larger red box with the solid border</p> </div><div id = "item" draggable = "true"></div><div id = "drop"></div></body></html>
這些和div都差不多，只是有些是預設display: inline;而非display: block;。
HTML+js,怎實現拖動滑鼠繪製一個矩形，滑鼠拖動矩形還可以移動位置？
我之前寫過一個 jQuery 小外掛程式：jQuery Ruler，用來測量任意網站元素的尺寸和座標。
剛才整理了一下，順便把你需要的代碼用原生 Javascript 寫出來了。
沒有什麼實際用途，只是實現繪製矩形和拖拽功能。
jQuery Ruler 寫在空間，有示範，有興趣可以看一下。
hi.baidu.com/keneks/item/04dbaf39d226e8f1e7bb7ab8
<!DOCTYPE html><html><head><meta charset="gb2312" /><title></title><style type="text/css">.box { background: #f00; width: 0px; height: 0px; position: absolute; opacity: 0.5; cursor: move;}</style><script type="text/javascript">window.onload = function(e) { e = e || window.event; // startX, startY 為滑鼠點擊時初始座標 // diffX, diffY 為滑鼠初始座標與 box 左上方座標之差，用於拖動 var startX, startY, diffX, diffY; // 是否拖動，初始為 false var dragging = false; // 滑鼠按下 document.onmousedown = function(e) { startX = e.pageX; startY = e.pageY; // 如果滑鼠在 box 上被按下 if(e.target.className.match(/box/)) { // 允許拖動 dragging = true; // 設定當前 box 的 id 為 moving_box if(document.getElementById("moving_box") !== null) { document.getElementById("moving_box").removeAttribute("id"); } e.target.id = "moving_box"; // 計算座標差值 diffX = startX - e.target.offsetLeft; diffY = startY - e.target.offsetTop; } ......餘下全文>>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
