HTML5中实现拖放效果无须借助javascript

在Web开发中，我们要实现拖放效果，需要借助Javascript。今天让我们使用Html5实现它：
先看html核心代码:

<div> 
<p>把***小方块拖入到红色大方框中</p> 
</div> 
<div id="item" draggable="true"> 
</div> 
<div id="drop"> 
</div>

draggable属性是html5新增加的，它有三个值true,false,auto. true是可以拖，false是不可以，auto由用户浏览器是否支持而定。更多请可以参考官方文档.
加上一点儿样式:

<style type="text/css"> 
#drop 
{ 
width: 300px; 
height: 200px; 
background-color: #ff0000; 
padding: 5px; 
border: 2px solid #000000; 
} 
#item 
{ 
width: 100px; 
height: 100px; 
background-color: #ffff00; 
padding: 5px; 
margin: 20px; 
border: 1px dashed #000000; 
} 
*[draggable=true] { 
-moz-user-select:none; 
-khtml-user-drag: element; 
cursor: move; 
} 
*:-khtml-drag { 
background-color: rgba(238,238,238, 0.5); 
} 
</style>

然后我们来看javascript:

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; 
} 
} 
// cancel event 
function cancelEvent (event) { 
if (event.preventDefault) { 
event.preventDefault(); 
} else { 
event.returnValue = false; 
} 
} 
// cancel propagation 
function cancelPropagation (event) { 
if (event.stopPropagation) { 
event.stopPropagation(); 
} else { 
event.cancelBubble = true; 
} 
} 
window.onload=function() { 
var target = document.getElementById("drop"); 
listenEvent(target,"dragenter",cancelEvent); 
listenEvent(target,"dragover", dragOver); 
listenEvent(target,"drop",function (evt) { 
cancelPropagation(evt); 
evt = evt || window.event; 
evt.dataTransfer.dropEffect = 'copy'; 
var id = evt.dataTransfer.getData("Text"); 
target.appendChild(document.getElementById(id)); 
}); 
var item = document.getElementById("item"); 
item.setAttribute("draggable", "true"); 
listenEvent(item,"dragstart", function(evt) { 
evt = evt || window.event; 
evt.dataTransfer.effectAllowed = 'copy'; 
evt.dataTransfer.setData("Text",item.id); 
}); 
}; 
function dragOver(evt) { 
if (evt.preventDefault) evt.preventDefault(); 
evt = evt || window.event; 
evt.dataTransfer.dropEffect = 'copy'; 
return false; 
}

由上面的代码我们看使用一组HTML5 提供的拖放Events,直接来看下面:
dragstart
Drag event starts.
drag
During the drag operation.
dragenter
Drag is over the target; used to determine if target will accept drop.
dragover
Drag is over target; used to determine feedback to user.
drop
Drop occurs.
dragleave
Drag leaves target.
dragend
Drag operation ends.
定义了相关的事件，来实现想要功能。上面的Js不难看懂。
你可以自己试一下，目前在Opera支持最好，IE效果并不好。
希望对您Web开发有帮助.