为什么我在本地浏览器可以实现效果,这里不行

为什么我在本地浏览器可以实现效果,这里不行

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


正在回答

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

1回答

测试了你的代码,效果是可以实现的,请同学重新描述你的问题,以便更好的检测和解决问题,祝学习愉快。

  • qq_浅仓小星_0 提问者 #1
    在做作业的页面实现不了效果啊,拿到本地就可以,为什么呢
    2018-06-27 15:03:46
  • 妮可妮可妮_ 回复 提问者 qq_浅仓小星_0 #2
    https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js 试试用这个cdn的网址~如果帮助到你记得采纳哦!
    2018-06-27 15:54:13
  • qq_浅仓小星_0 提问者 #3
    非常感谢!
    2018-06-27 16:06:00
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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