5-2编程问题

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

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

2回答
卡布琦诺 2018-05-21 15:48:24

经测试,拖拽框就可以进行拖拽排序的,不需要选中文字的,建议你仔细检查一下代码哦

卡布琦诺 2018-05-21 15:30:21

http://img1.sycdn.imooc.com//climg/5b02758200019cf110600577.jpg

希望可以帮到你~

  • 提问者 慕九州9265930 #1
    这样写之后,为什么也是不能像案例那样,只要拖动li的框就可以实现拖拽,而是哟选中文本之后才能拖拽
    2018-05-21 15:43:58
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星

相似问题

登录后可查看更多问答,登录/注册

组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

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

在线咨询

领取优惠

免费试听

领取大纲

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