<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
li{
width: 100px;
height: 30px;
background: #333;
margin: 10px;
color: #fff;
list-style: none;
}
#d1{
width: 100px;
height: 100px;
background: #FF0066;
margin: 300px;
}
</style>
<script>
window.onload = function () {
var aLi = document.getElementsByTagName('li');
var oDiv = document.getElementById('d1');
var num = 0;
var oLi = null;
for(var i =0;i<aLi.length;i++){
aLi[i].index = i ;
aLi[i].ondragstart = function (ev) {
var ev = ev||event;
ev.dataTransfer.setData('name',this.index);
//this.style.background = 'green';
}
aLi[i].ondrag = function (e) {
var e = e||event;
num++;
document.title = e.clientX;
}
aLi[i].ondragend = function () {
this.style.background = '#333';
num = 0;
}
}
oDiv.ondragenter = function () {
this.style.background = 'orange';
}
oDiv.ondragover = function (e) {
//相对于dragenter 和dragleave的连续触发
// document.title = num++;
// 要想触发drop事件，必须在dragover中阻止默认事件
e.preventDefault();
}
oDiv.ondragleave = function () {
this.style.background = 'red';
}
oDiv.ondrop = function (ev) {
oDiv.appendChild(aLi[ev.dataTransfer.getData('name')]);
for(var i = 0 ; i<aLi.length;i++){
aLi[i].index = i ;
}
}
}
</script>
<body>
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
<li draggable="true">d</li>
</ul>
<div id="d1"></div>
</body>
</html>
虽然通过dragstart、drag和dragend事件实现了原生拖拽。但是这仅仅是拖拽，在IE6和IE7中还是有些拖拽问题，并且也没有实现数据的交换。为了实现数据的交换，IE5引入了dataTransfer对象。dataTransfer对象是事件对象的一个属性，用于从被拖拽元素相放置目标传递字符串格式的数据。因为它是事件对象的属性，所以只能在拖放事件的事件处理程序中访问dataTransfer对象。在事件处理程序中，可以使用这个对象的属性和方法来完善拖放功能。
dataTransfer对象有两个主要的方法：getData()方法和setData()方法。从这两个方法的英文字面意思上就能大概猜出来其用途。getData()方法可以取得由setData()方法保存的值。setData()方法的第一个参数，也是getData()方法唯一的一个参数，是用来保存数据类型的字符串，取值是”text”或”URL”。
在拖动目标上触发事件 (源元素)
ondragstart 事件在用户开始拖动元素或选择的文本时触发。
ondrag 元素正在拖动时触发
ondargend 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop 在一个拖动过程中，释放鼠标键时触发此事件
dataTransfer,
dataTransfer.setData(key , value);//设置指定格式的数据赋值给dataTransfer
dataTransfer.setData(key)//取得dataTransfer传过来的值
dataTransfer.setDataImage(obj,x,y)//设置拖拽时更随鼠标显示的内容，并设定鼠标在更随显示内容上的X、Y坐标
模拟拖拽购物车：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#shoplist{
height: 370px;
}
#shoplist li{
float: left;
padding: 10px;
border: 1px solid #E7E7E7;
width: 200px;
background: #FFF;
margin: 10px;
color: #333;
list-style: none;
}
#shoplist img{ width: 200px; height: 285px}
#shoplist p{
line-height: 28px;
border-bottom: 1px dashed #DCDCDC;
font-size: 14px;
}
#d1{
padding: 15px;
width: 400px;
height: 400px;
background: #fff;
border: 1px solid #999;
margin: 30px;
font-size: 14px;
}
#d1 p{
height: 40px;
line-height: 40px;
border-bottom: 1px dashed #999;
}
#d1 span{
float: left;
display: block;
}
#d1 .n{
width: 10%;
}
#d1 .t{
width: 60%;
}
#d1 .money{
width: 30%;
text-align: right;
}
#d1 .m{
text-align: right;
line-height: 40px;
}
</style>
<script>
window.onload = function () {
var oUl = document.getElementById('shoplist');
var aLi = oUl.getElementsByTagName('li');
var oDiv = document.getElementById('d1');
var oAllmoney = null;
var iNum = 0;
var oData = {};
for(var i =0;i<aLi.length;i++){
aLi[i].index = i ;
aLi[i].ondragstart = function (ev) {//拖拽开始
var ev = ev||event;
var aP = this.getElementsByTagName('p');
//设置拖拽需要传过去的值
ev.dataTransfer.setData('title',aP[0].innerHTML);
ev.dataTransfer.setData('money',aP[1].innerHTML);
//设置拖拽时鼠标的样式
ev.dataTransfer.setDragImage(this,0,0);
}
}
oDiv.ondragover = function (ev) {
ev.preventDefault();//阻止默认事件ondrop才会起作用
}
oDiv.ondrop = function (ev) {
ev.preventDefault();//阻止默认事件，防止图片在新窗口打开
//接收ondragstart里 ev.dataTransfer.setData传过来的值并存在变量里
var t = ev.dataTransfer.getData('title');
var money = ev.dataTransfer.getData('money');
if(!oData[t]){
//如果之前这本书不存在，就创建dom元素，并把数据填入
var oP = document.createElement('p');
oData[t] = t;
var oSpan = document.createElement('span');
oSpan.className = 'n';
oSpan.innerHTML = 1;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 't';
oSpan.innerHTML = t;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 'money';
oSpan.innerHTML = money;
oP.appendChild(oSpan);
oDiv.appendChild(oP);
}else{
//如果该书已在购物车，就不再添加，而只是修改书的数量
var aN = d1.getElementsByClassName('n');
var aT = d1.getElementsByClassName('t');
for(var i = 0; i < aN.length; i++){
if(aT[i].innerHTML == t){//判断是增加哪一本书的数量
aN[i].innerHTML = parseInt(aN[i].innerHTML) + 1
}
}
}
//创建总价统计dom元素，并添加到页面
if(!oAllmoney){//如果之前没有就创建总价统计dom元素
oAllmoney = document.createElement('div');
oAllmoney.className = 'm';
}
iNum += parseFloat(money); //计算价格
oAllmoney.innerHTML = iNum + '元';
oDiv.appendChild(oAllmoney);
}
}
</script>
<body>
<ul id="shoplist">
<li draggable="true">
<img src="../img/9.jpg" alt=""/>
<p>这是一个图片1</p>
<p>30.5元</p>
</li>
<li draggable="true">
<img src="../img/5.jpg" alt=""/>
<p>这是一个图片2</p>
<p>20.5元</p>
</li>
<li draggable="true">
<img src="../img/6.jpg" alt=""/>
<p>这是一个图片3</p>
<p>50.5元</p>
</li>
<li draggable="true"> <img src="../img/8.jpg" alt=""/>
<p>这是一个图片4</p>
<p>40.5元</p>
</li>
</ul>
<div id="d1">
<!--<p>
<span class="n">1</span><span class="t">2</span><span class="money"3></span>
</p>
<div class="m">000</div>-->
</div>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
