请问老师,之前的编程有些问题该怎么解决?

请问老师,之前的编程有些问题该怎么解决?

<!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

登陆购买课程后可参与讨论,去登陆

1回答
卡布琦诺 2017-09-04 17:32:19

首先获取到id card

然后获取到每一个li

设置for循环,在循环中给li设置ondragstart事件

然后设置ondragover事件,返回值设置为return false;

最后设置ondrop事件

以上是实现思路,希望你可以结合思路以及课程中老师讲解的知识进行完善,如果是还不知道如何解决,欢迎再次提问!


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5&CSS3进阶与常用框架 2018
  • 参与学习       315    人
  • 提交作业       136    份
  • 解答问题       626    个

如果你有H5、CSS3、JS基础,热爱前端并希望在前端应用方面不断进步,那就来吧,本路径为你带来的课程有HTML5进阶、CSS3进阶、JS面向对象、jQ基础、Less等,助你进一步提升前端开发技能

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师