如何阻止拖拽打开网页的同时不会影响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>
正在回答
首先避免打开新窗口,你可以将数据名称改个名字,其次实现拖拽效果,你得取消默认事件,如下图
- 参与学习 315 人
- 提交作业 136 份
- 解答问题 626 个
如果你有H5、CSS3、JS基础,热爱前端并希望在前端应用方面不断进步,那就来吧,本路径为你带来的课程有HTML5进阶、CSS3进阶、JS面向对象、jQ基础、Less等,助你进一步提升前端开发技能
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星