本文实例讲述了JS实现的简单拖拽购物车功能。分享给大家供大家参考,具体如下:
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title>使用拖放API将商品拖入购物车& lt;/title>
& lt; style>
身体{
字体大小:12 px
}
.liT {
边界底部:固体1 px # ccc;
background - color: # eee;
粗细:大胆
}
.liF {
浮:左;
margin-right: 5 px;
}
ul {
list-style-type:没有;
填充:0 px;
身高:106 px;
宽度:330像素
}
ul李{
23 px高度:
}
ul李img {
宽度:68 px;
身高:96 px;
边界:固体1 px # ccc;
填充:3 px
}
ul李跨度{
浮:左;
宽度:70 px;
填充:5 px;
}
& lt;/style>
& lt;脚本type=" text/javascript祝辞
函数$ $ (id) {
返回. getelementbyid (id);
}//自定义页面加载时调用的函数
函数新(){//获取全部的图书商品
var=document.getElementsByTagName拖(img);//遍历每一个图书商品
(var印锑=0;印锑& lt;Drag.length;印锑+ +){//为每一个商品添加被拖放元素的dragstart事件
拖动(印锑).addEventListener (“dragstart”,
函数(e) {
var objDtf=e.dataTransfer;
objDtf。setData (" text/html " addCart(这一点。标题,这。alt, 1));
},
真正的);
}
var车=$ $ (“ulCart”);//添加目标元素下降的事件
Cart.addEventListener(“下降”,
函数(e) {
var objDtf=e.dataTransfer;
var strHTML=objDtf.getData (" text/html ");
var num=top_ ();
车。innerHTML +=strHTML;
. getelementbyid (“num”) .innerHTML=num;
var价格=. getelementbyid(“价格”).innerHTML;
. getelementbyid(”和“).innerHTML=num *价格;
e.preventDefault ();
e.stopPropagation ();
},
假);
}//添加页面的dragover事件
文档。ondragover=function (e) {//阻止默认方法,取消拒绝被拖放
e.preventDefault ();
}//添加页面滴事件
文档。ondrop=function (e) {//阻止默认方法,取消拒绝被拖放
e.preventDefault ();
}//自定义向购物车中添加记录的函数
函数addCart (a, b, c) {
var strHTML=" & lt;李类=暗胤秸蹲使尽痹凇?
strHTML +=& lt; span>“+ +“& lt;/span>”;
strHTML +=& lt;跨越id=\“\”在“价格+ b +“& lt;/span>”;
strHTML +=? lt;跨id=\ " num \“在”+ c +“& lt;/span>”;
strHTML +=? lt;跨id=\ "和\“在”+ b * c +“& lt;/span>”;
strHTML +=? lt;/li>”;
返回strHTML;
}//提示输入框
函数top_ () {
var str=提示(“请输入要购买的数量",1);
返回str;
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; ul>
& lt;李类="生活"的在
& lt; img src=" https://www.yisu.com/zixun/images/img02.jpg " id=癷mg02”
alt=" 42 " title=?006作品”可拖动的=" true "比;
& lt;/li>
& lt;李类="生活"的在
& lt; img src=" https://www.yisu.com/zixun/images/img03.jpg " id=癷mg03”
alt=" 56 " title=?008作品”可拖动的=" true "比;
& lt;/li>
& lt;李类="生活"的在
& lt; img src=" https://www.yisu.com/zixun/images/2.jpg " id=癷mg04”
alt=" 52 " title=?010作品”可拖动的=" true "比;
& lt;/li>
& lt;李类="生活"的在
& lt; img src=" https://www.yisu.com/zixun/images/1.jpg " id=癷mg05”
alt=" 59 " title=?011作品”可拖动的=" true "比;
& lt;/li>
& lt;/ul>
& lt; ul id=皍lCart”比;
& lt;李类=暗闳肌北?
& lt; span>书名& lt;/span>
& lt; span>定价& lt;/span>
& lt; span>数量& lt;/span>
& lt; span>总价& lt;/span>
& lt;/li>
& lt;/ul>
& lt;/body>
& lt;/html>
之前
运行效果:
JS实现的简单拖拽购物车功能示例【附源码下载】
