5-2编程问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用拖拽更改支付宝的默认付款方式</title>
<style type="text/css">
ul{
width:300px;
}
li{
list-style:none;
border:1px dashed;
font-size:12px;
line-height:25px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
</head>
<body>
<h3>使用拖拽更改支付宝的默认付款方式</h3>
<ul id="card">
<li draggrable="true">招商信用卡</li>
<li draggrable="true">交通信用卡</li>
<li draggrable="true">中信储蓄卡</li>
<li draggrable="true">建行储蓄卡</li>
<li draggrable="true">蚂蚁花呗</li>
<li draggrable="true">余额宝</li>
<li draggrable="true">余额</li>
</ul>
<script>
var dragSrc;
( function($){
//给每个li绑定拖拽事件
$("li").each(function(index,ele){
$(ele).on("dragstart",function(e){
dragSrc=this;
//将HTML中的文本数据设置进去
e.dataTransfer.setData("text/html",this.innerHTML);
}).on("dragover",function(e){
e.preventDefault();//这个一定不能忘了,要不然拖拽不能生效
}).on("drop",function(e){
if(dragSrc!=this){
dragSrc.innerHTML= this.innerHTML;
this.innerHTML =e.dataTransfer.getData("text/html");
}
});
})
})(jQuery);
</script>
</body>
</html>
为什么这样实现不了呢?
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星