提起拖拽,我就想起了在JavaScript培訓的時候一個非常好玩的效果,那就是拖曳了。可以用滑鼠任意拖曳著一個物體到任何你想去的地方。
最早擁有JavaScript拖曳功能的是IE4瀏覽器。當時,網頁中只有兩種物件是可以拖曳的,那就是:圖形和某些文字。拖曳圖像的時候,把滑鼠放在圖像上,按住滑鼠不放就可以拖曳了。拖曳文字時,要先選取文字,然後可以像拖曳圖像一樣拖曳選取的文字。在IE4中,唯一有效的放置拖曳文字的目標是文字方塊。到了IE5.5更進一步,讓網頁中的任何元素都可以拖曳(IE6以上也支援這些功能了)。隨著瀏覽器一點點更新換代,隨著IE7IE8以及其他瀏覽器的誕生,網頁中所有東西都可以拖曳了,只不過是透過JavaScript程式來實現的。下面就是沒有HTML5的時候,拖曳的實作小例子。
HTML代碼
<p id="p1" style="width:100px; height:100px; background:red; position:absolute;">梦龙小站</p>
〜 CSS代碼
window.onload = function(){ var op = document.getElementById('p1'); var disX = 0; var disY = 0; op.onmousedown = function(ev){ var ev = ev || window.event; disX = ev.clientX - op.offsetLeft; disY = ev.clientY - op.offsetTop; //在IE下,如果选中元素拖拽就会有问题 : IE设置全局捕获:setCapture 释放全局捕获:releaseCapture if(op.setCapture){ op.setCapture(); } document.onmousemove = function(ev){ var ev = ev || window.event; op.style.left = ev.clientX - disX + 'px'; op.style.top = ev.clientY - disY + 'px'; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; if(op.releaseCapture){ op.releaseCapture(); } }; //在标准浏览器下如果拖拽一个空的标签,就会有问题 : return false //在标准浏览器下拖拽图片会有问题:return false return false; }; };
HTML5中的拖曳,可以在窗口間、框架間,甚至在應用間進行完美拖曳。瀏覽器對拖曳的支援為實現此功能實現了便利。 HTML5實戰與剖析之原生拖曳(一)-拖曳歷史概述,就為大家介紹到這裡了。更多相關內容請關注PHP中文網(www.php.cn)!