关于HTML5中的拖放
拖放（Drag 和 Drop）是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 中，拖放是标准的组成部分。在HTML5中用户可以使用鼠标选择一个可拖动元素，将元素拖动到一个可放置元素，并通过释放鼠标按钮放到这些元素。在拖动操作期间，可拖动元素的半透明表示跟随鼠标指针。
如果我们希望元素可以被拖动，那么需要将其 draggable属性设为true (a标签draggable默认是true)
拖放的事件
在进行拖放操作的不同阶段会触发数种事件，拖拽事件的dataTransfer属性存放了拖放操作中的相关数据。
dragstart
作用于[源元素]，当一个元素开始被拖拽的时候触发，用户拖拽的元素需要附加dragstart事件。在这个事件中，监听器将设置与这次拖拽相关的信息，例如拖动的数据和图像。
<
div
style
="display: table;"
>
<
div
class
="bin"
>
<
div
class
="box"
draggable
="true"
>
可拖拽元素
</
div
>
</
div
>
<
div
class
="bin"
>
</
div
>
</
div
>
<
script
type
="text/javascript"
>
var
bins
=
document.querySelectorAll(
'
.bin
'
);
var
boxs
=
document.querySelectorAll(
'
.box
'
);
var
drag
=
null
;
for
(
var
i
=
0
; i
<
boxs.length; i
++
) {
var
box
=
boxs[i];
box.onselectstart
=
function
() {
return
false
;
box.ondragstart
=
function
(e) {
e.dataTransfer.effectAllowed
=
'
move
'
;
e.dataTransfer.setData(
'
text/plain
'
, e.target.outerHTML);
e.dataTransfer.setDragImage(e.target,
0
,
0
);
drag
=
this
;
return
true
;
box.ondragend
=
function
(e) {
drag
=
null
;
return
false
for
(
var
i
=
0
; i
<
bins.length; i
++
) {
var
bin
=
bins[i];
//
当拖曳元素进入目标元素
bin.ondragover
=
function
(e) {
e.preentDefault();
return
true
;
//
拖拽元素在目标元素上移动
bin.ondragenter
=
function
(e) {
this
.style.backgroundColor
=
'
#eeeeff
'
;
return
true
;
//
拖拽元素在目标元素上离开
bin.ondragleave
=
function
(e) {
this
.style.backgroundColor
=
'
#fff
'
;
return
true
;
//
拖拽的元素在目标元素上同时鼠标放开
bin.ondrop
=
function
(e) {
if
(drag) {
drag.parentNode.removeChild(drag);
this
.appendChild(drag);
this
.style.backgroundColor
=
'
#fff
'
;
return
false
;
document.body.ondrop
=
function
(e) {
e.preventDefault();
e.stopPropagation();
</
script
>
</
body
>
</
html
>
