为什么无法实现效果?

为什么无法实现效果?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>返回鼠标指针的位置</title>
<style type="text/css">
    .container{
        width: 200px;
        height: 200px;
        background: yellow;
    }
    .target{
        width: 100px;
        height: 100px;
        background: pink;
    }
</style>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  // 此处补充代码
    var dragstart=function(e){
        e.dataTransfer.setData("Text",e.target.id);
    }
    var drop=function(e){
        e.preventDefault();
        var data=e.dataTransfer.getData("Text");
        e.target.appendChild(document.getElementById(data));
    }
    var dragover=function(e){
        e.preventDefault();
    }
});
</script>
</head>
<body>
    <div id="container" class="container" ondrop="drop(event)" ondragover="dragover(event)"></div>
    <div id="target" class="target" draggable="true" ondragstart="dragstart(event)"></div>
</body>
</html>


正在回答

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

2回答

第一,从同学上传的代码来看,这里是原生js 的写法,因此不需要使用<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> </script>,因为是原生js的写法,因此也不需要使用 $(document).ready(function() {}), $(document).ready(function() {})是jq的初始化代码

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

第二,放在head中也是可以实现的,这里老师是习惯性的放在了</body>前面。

祝学习愉快!

卡布琦诺 2019-04-14 12:00:29

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

希望可以帮到你!

  • 谢谢老师。两个问题。 问题一:使用jquery时,为什么不用添加 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> </script> 问题二:为什么在head标签中写jquery代码无法实现效果?
    2019-04-14 15:32:06
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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