为什么我在本地浏览器可以实现效果,这里不行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用拖拽更改支付宝的默认付款方式</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style type="text/css">
/*此处写代码*/
*{
padding:0;
margin:0;
}
body{
background-color: #eee;
text-align: center;
}
h3{
margin-top:20px;
margin-bottom:20px;
}
ul{
margin:0 auto;
width:300px;
}
li{
text-align: left;
width:300px;
border:1px #000 dashed;
}
.hide{
display: none;
}
</style>
</head>
<body>
<h3>使用拖拽更改支付宝的默认付款方式</h3>
<ul id="card">
<li draggable="true">招商信用卡</li>
<li draggable="true">交通信用卡</li>
<li draggable="true">中信储蓄卡</li>
<li draggable="true">建行储蓄卡</li>
<li draggable="true">蚂蚁花呗</li>
<li draggable="true">余额宝</li>
<li draggable="true">余额</li>
</ul>
<img id="image" class="hide" src="http://img1.sycdn.imooc.com/climg//59705a7b0001736902000080.png" alt="">
<script>
// 此处写代码
(function($){
var dragSrc;
$('#card li').each(function(index,ele){
$(ele).on('dragstart',function(e){
dragSrc=this;
e.originalEvent.dataTransfer.setData('text/html',this.innerHTML);
e.originalEvent.dataTransfer.setDragImage($('#image').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 星