请问老师,之前的编程有些问题该怎么解决?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用拖拽更改支付宝的默认付款方式</title>
<script src="jquery-3.2.1.min.js"></script>
<style type="text/css">
ul{
width: 200px;
height:200px;
background-color: grey;
}
ul li{
width: 80px;
height: 25px;
background-color: white;
line-height: 25px;
text-align: center;
list-style: none;
border: 1px dashed gray;
cursor: pointer;
readonly:;
}
.hide{
display:none;
}
</style>
</head>
<body>
<h3>使用拖拽更改支付宝的默认付款方式</h3>
<ul id="card">
<li draggrable="true" class="li1" ondrop="drop(event)" ondragstart="dragstart(event)">招商信用卡</li>
<li draggrable="true" class="li1" ondrop="drop(event)" ondragstart="dragstart(event)">交通信用卡</li>
<li draggrable="true" class="li1" ondrop="drop(event)" ondragstart="dragstart(event)">中信储蓄卡</li>
<li draggrable="true" class="li1" ondrop="drop(event)" ondragstart="dragstart(event)">建行储蓄卡</li>
<li draggrable="true" class="li1" ondrop="drop(event)" ondragstart="dragstart(event)">蚂蚁花呗</li>
<li draggrable="true" class="li1" ondrop="drop(event)" ondragstart="dragstart(event)">余额宝</li>
<li draggrable="true" class="li1" ondrop="drop(event)" ondragstart="dragstart(event)">余额</li>
</ul>
<img src="1.png" alt="" id="image" class="hide">
<script>
var dragsrc;
$(".li1").each(function(index,ele){
$(ele).on("dragstart",function(e){
dragsrc=this;
e.originalEvent.dataTransfer.setData("Text",this.innerHTML);
e.dataTransfer.setDragImage($("#image").clone().removeClass('hide')[0],0,0);
});
$(ele).on("dragover",function(e){
e.preventDefault();
});
$(ele).on("drop",function(e){
if(dragsrc!=this){
dragsrc.innerHTML = this.innerHTML;
this.innerHTML = e.originalEvent.dataTransfer.getData("Text");
}
});
});
</script>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 315 人
- 提交作业 136 份
- 解答问题 626 个
如果你有H5、CSS3、JS基础,热爱前端并希望在前端应用方面不断进步,那就来吧,本路径为你带来的课程有HTML5进阶、CSS3进阶、JS面向对象、jQ基础、Less等,助你进一步提升前端开发技能
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星