如何阻止拖拽打开网页的同时不会影响drag事件??

如何阻止拖拽打开网页的同时不会影响drag事件??

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
       #box1 {
           width: 100px;
height: 100px;
border: 1px solid #000;
}
       #box {
           width: 100px;
height: 100px;
}
       .box{
           background: #4fa2c4;
}
   </style>
   <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="dragWrap">
   <div id="box" class="box">1</div>
   <p id="msg">dragstart>drag>dragenter</p>
   <div id="box1">2</div>
   <p id="msg1">1231</p>
</div>
</body>
<script type="text/javascript">
//拖拽对象
drag_obj = {
       $ele: document.querySelector('#box'),
$tar: document.querySelector('#box1')
   };
var msg = document.querySelector('#msg')
   var msg1 = document.querySelector('#msg1')
   //初始化拖拽事件
drag_obj.$ele.setAttribute('draggable', true);
drag_obj.$ele.ondragstart=function (event){
       var tar=event.target;
var tarData=tar.outerHTML;
event.dataTransfer.setData("Text",tarData);

};
drag_obj.$tar.ondrop=function (event){
       var tar=event.target;
var Data=event.dataTransfer.getData('Text');
tar.innerHTML=Data;
}

</script>
</html>

正在回答

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

1回答

首先避免打开新窗口,你可以将数据名称改个名字,其次实现拖拽效果,你得取消默认事件,如下图

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

  • 纯情掉了一地 提问者 #1
    我知道了 根本不需要dragover事件 在drop事件里面取消就可以了。这个问题解决了 谢谢
    2018-02-09 12:32:48
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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