老师，怎么都实现不了？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用拖拽更改支付宝的默认付款方式</title>
<style type="text/css">
ul{
width:300px;
}
li{
list-style:none;
padding:5px;
border:1px dashed grey;
}
.hide{
display:none;
}
</style>
</head>
<body>
<h3>使用拖拽更改支付宝的默认付款方式</h3>
<ul id="card">
<li>招商信用卡</li>
<li>交通信用卡</li>
<li>中信储蓄卡</li>
<li>建行储蓄卡</li>
<li>蚂蚁花呗</li>
<li>余额宝</li>
<li>余额</li>
</ul>
<img src="http://img1.sycdn.imooc.com/climg//59705a7b0001736902000080.png" class="hide">
<script>
(function($){
$('li').each(function(index,ele){
var dragSrc;
$(ele).on("dragstart",function(e){
dragSrc=this;
e.originalEvent.dataTransfer.setData("text/html",this.innerHTML);
e.originalEvent.dataTransfer.setDragImage($('.hide').clone().removeClass('hide')[0],0,0);
}).on("dragover",function(e){
e.preventDefault();
}).on("drop",function(){
if(dragSrc!=this){
dragSrc.innerHTML=this.innerHTML;
this.innerHTML= e.originalEvent.dataTransfer.getData("text/html");
}
})
})
})(jQuery)
</script>
</body>
</html>
正在回答 回答被采纳积分+1
老兄，这里的setData和getData根本就不需要用，直接用insertBefore和insertAfter。就可以啦
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用拖拽更改支付宝的默认付款方式</title>
<style type="text/css">
ul{
width:300px;
}
li{
list-style:none;
padding:5px;
border:1px dashed grey;
}
.hide{
display:none;
}
</style>
</head>
<body>
<h3>使用拖拽更改支付宝的默认付款方式</h3>
<ul id="card">
<li>招商信用卡</li>
<li>交通信用卡</li>
<li>中信储蓄卡</li>
<li>建行储蓄卡</li>
<li>蚂蚁花呗</li>
<li>余额宝</li>
<li>余额</li>
</ul>
<img src="http://img1.sycdn.imooc.com/climg//59705a7b0001736902000080.png" class="hide">
<script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
(function($){
var dragSrc;
$('li').each(function(index,ele){
$(ele).attr('draggable','true');
$(ele).on("dragstart",function(e){
dragSrc=this;
e.originalEvent.dataTransfer.setData("text/html",this.innerHTML);
e.originalEvent.dataTransfer.setDragImage($('.hide').clone().removeClass('hide')[0],0,0);
}).on("dragover",function(e){
e.preventDefault();
}).on("drop",function(e){
if(dragSrc!=this){
dragSrc.innerHTML=this.innerHTML;
this.innerHTML= e.originalEvent.dataTransfer.getData("text/html");
}
})
})
})(jQuery)
</script>
</body>
</html>
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星