拖拽相关属性

可拖动的属性是html5的全局属性，是html5支持拖放操作的方式之一，用来表示元素是否可以被拖放，可拖动有三个值，真的表示可以拖放，false表示不可以被拖放，自动表示使用浏览器的默认值

XML/HTML代码复制内容到剪贴板

保险商实验所

liid='item1 '可拖动='true '列表1/li

liid='item2 '可拖动='true '列表2/li

liid='item3 '可拖动='true '列表3/li

liid='item4 '可拖动='true '列表4/li

liid='item5 '可拖动='true '列表5/li

liid='item6 '可拖动='true '列表6/li

/ul

拖拽相关的事件

ondragstart:此事件在用户开始拖动元素或选择文本时触发ondrag:元素正在拖动时触发ondragend:用户完成元素拖放时触发ondragleave:当被鼠标拖动的对象离开其容器范围时触发ondragover:当某个被拖动的对象在另一对象容器范围内拖动时触发此事件，此事件发生在目标元素身上ondrop:在一个拖动过程中，释放鼠标时触发，此事件作用在目标元素身上

dataTransfer 对象相关方法

setData(格式，数据):添加自定义数据格式getData(格式):获取自定义的数据格式clearData([格式]):清除自定义的数据格式及数据

Event.preventDefault()

此方法是阻止事件的默认行为，在ondragover中一定要执行preventDefault()，否则放置事件不会被触发

实现案例：

XML/HTML代码复制内容到剪贴板

！DOCTYPEhtml

超文本标记语言

头

' UTF-8 '

标题/头衔

styletype='text/css '。main{

宽度宽度：800像素

/* border :1 pxsolid # CCC；*/

高度：400像素

余量：0自动

}。左{

float:left

宽度：25%;

背景色： # 666;

高度：370像素

文本对齐：中心；

颜色：黑色；

padding-top :30 px；

font-size :110 px

}。右{

右侧浮动：

宽度：69%;

}。好的右。{

边距n:0

padding:0

}。rightli{

列表样式：无；

border:2pxdashed虚线虚线# 666;

背景-color : # DDD；

高度：60像素

margin-top :3 px；

text-indent :30 px；

行高：60 px

}。右悬停：

背景色： # CCC

}

#消息{

宽度宽度：800像素

文本对齐：中心；

border:1pxsolidblack

margin:20pxauto

font-size :28 px

}

/style

scripttype='text/javascript '

window.onload=function(){

varaLi=文档。getelementsbytagname(' Li ')；

varoLeft=document。GetElementsByclassname(' left ')[0]；

varoMessage=document。getelementbyid(' message ')；

for(vari=0；iaLi.lengthi ){

aLi[i].指数=I ^ 1；

aLi[i].ondragstart=function(ev){

//事件对象电子伏特

varevev=ev | | event

ev.dataTransfer.setData('Text '，这个。id)；

}

}

oLeft.ondrop=function(ev){

varevev=ev | | event

var数据=ev。数据传输。获取数据('文本')；

varnum=document.getElementById(数据)。指数；

document.getElementById(数据)。移除();

' oMessage.innerHTML='列表' num '被放进了垃圾箱；

这个。风格。color=' black

}

oLeft.ondragover=function(ev){

varevev=ev | | event

ev。PreventDefault()；

}

oLeft.ondragenter=function(){

这个。风格。color=' # fff

}

}

/script

/head

身体

divclass='main '

divclass='左'垃圾箱/div

divclass='right '

保险商实验所

liid='item1 '可拖动='true '列表1/li

liid='item2 '可拖动='true '列表2/li

liid='item3 '可拖动='true '列表3/li

liid='item4 '可拖动='true '列表4/li

liid='item5 '可拖动='true '列表5/li

liid='item6 '可拖动='true '列表6/li

/ul

/div

divstyle=' clear:both'/div

/div

divid='message '拖到垃圾箱删除列表/div

/body

/html