<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> li{ 100px; height: 30px; background: #333; margin: 10px; color: #fff; list-style: none; } #d1{ 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; 200px; background: #FFF; margin: 10px; color: #333; list-style: none; } #shoplist img{ 200px; height: 285px} #shoplist p{ line-height: 28px; border-bottom: 1px dashed #DCDCDC; font-size: 14px; } #d1{ padding: 15px; 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{ 10%; } #d1 .t{ 60%; } #d1 .money{ 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>