HTML5實現的拖拽效果

2024-09-05 12:18:46

字體：大中小

來源：轉載

供稿：網友

HTML5實現的拖拽效果，IE8暫不支持HTML5，因此觀看效果請選用更高版本的IE9，或者火狐、Chrome或Opera等瀏覽器。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>HTML5實現的拖拽效果</title><style type="text/css">#boxA, #boxB, #boxC {   float:left; width:165px; height:165px; padding:10px; margin:10px; }#boxA { background-color: #474747; }#boxB { background-color: #474747; }#boxC { background-color: #474747; }#drag, #drag2, #drag3 {  width:30px; height:30px; padding:5px; margin:5px;  -moz-user-select:none;}#drag { background-color: #e8e8e8;}#drag2 { background-color: orange;}#drag3 { background-color: purple; border:3px brown solid;}</style><script type="text/javascript">function dragStart(ev) {    ev.dataTransfer.effectAllowed='move';    //ev.dataTransfer.dropEffect='move';    ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));    ev.dataTransfer.setDragImage(ev.target,0,0);    return true;}function dragEnter(ev) {    var idelt = ev.dataTransfer.getData("Text");    return true;}function dragOver(ev) {    var idelt = ev.dataTransfer.getData("Text");    var id = ev.target.getAttribute('id');    if( (id =='boxB' || id =='boxA') && (idelt == 'drag' || idelt=='drag2'))        return false;    else if( id =='boxC' && idelt == 'drag3')        return false;    else        return true;}function dragEnd(ev) {    ev.dataTransfer.clearData("Text");    return true}function dragDrop(ev) {    var idelt = ev.dataTransfer.getData("Text");    ev.target.appendChild(document.getElementById(idelt));    ev.stopPropagation();    return false; // return false so the event will not be propagated to the browser}</script></head><body>    <h1>Drag and drop HTML5 demo</h1>    <div>there are many other variables that can be used also, we will coer this another day.    </div>    <div   class="ijfqmbb"   id="boxA"        ondragenter="return dragEnter(event)"        ondrop="return dragDrop(event)"        ondragover="return dragOver(event)">      <div   class="uzvrjyn"   id="drag" draggable="true"            ondragstart="return dragStart(event)"            ondragend="return dragEnd(event)">drag me</div>      <div   class="flwszzz"   id="drag2" draggable="true"            ondragstart="return dragStart(event)"            ondragend="return dragEnd(event)">drag me</div>      <div   class="mcvxlbm"   id="drag3" draggable="true"            ondragstart="return dragStart(event)"            ondragend="return dragEnd(event)">drag me</div>    </div>    <div   class="xwhodfu"   id="boxB"        ondragenter="return dragEnter(event)"        ondrop="return dragDrop(event)"        ondragover="return dragOver(event)">    </div>    <div   class="kbraqqz"   id="boxC"        ondragenter="return dragEnter(event)"        ondrop="return dragDrop(event)"        ondragover="return dragOver(event)">    </div>    <div style="clear:both">Example created by HTML Tutorials.</div><br></body></html>

上一篇：HTML5穿越星空，響應鼠標跟隨

下一篇：HTML5+CSS3點擊顯示網頁側邊欄的效果