相关重点
DataTransfer 对象：
- 退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
draggable 属性：
- 就是标签元素要设置draggable=true，否则不会有效果，例如：
<div title="拖拽我" draggable="true">列表1</div>Event.preventDefault() 方法：
- 阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从
- 其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。
- 此时需要用用document的ondragover事件把它直接干掉。Event.effectAllowed 属性：就是拖拽的效果
| 事件 | 产生事件的元素 | 描述 |
|---|---|---|
| dragstart | 被拖放的元素 | 开始拖放操作 |
| drag | 被拖放的元素 | 拖放过程中 |
| dragenter | 拖放过程中鼠标经过的元素 | 被拖放元素开始进入本元素的范围内 |
| dragover | 拖放过程中鼠标经过的元素 | 被拖放元素正在本元素范围内移动 |
| dragleave | 拖放过程中鼠标经过的元素 | 被拖放元素离开本元素的范围 |
| drop | 拖放的目标元素 | 有其他元素被拖放到本元素中 |
| dragend | 拖放的对象元素 | 这里写代码片拖放操作结束 |
| 属性 | 描述 |
|---|---|
| dropEffect | 表示拖放操作的视觉效果，允许对其进行值的设定。该效果必须在用effectAllowed属性指定的允许的视觉效果范围内，允许指定的值有：none、copy、link、move。 |
| effectAllowed | 用来指定当元素被拖放时所允许的视觉效果。可以指定的值有：none、copy、copyLink、copyMove、link、linkMove、all、uninitialize。 |
| files | 返回表示被拖拽文件的 FileList。 |
| types | 存入数据的MIME类型。如果任意文件被拖拽，那么其中一个类型将会是字符串”Files”。 |
实例讲解
创建一个html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{width: 400px;height: 400px;background-color: grey;}
img{width: 200px;}
</style>
<script src="js/ja.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id='box1' class="box"></div>
<img src="img/8.jpg"/>
<div class="inter"></div>
</body>
</html>
第一步的js文件
var $box,$in;
window.onload=function(){
//ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
$box = document.getElementsByClassName('box')[0];
$in =document.getElementsByClassName('inter')[0];
$box.ondragenter=function(e){
//监听事件，返回信息
showOb(e);
}
}
function showOb(obj){
//打印事件信息
var s ='';
for(var k in obj){
s += k+':'+obj[k]+'<br/>'
}
$in.innerHTML= s;
}观看效果
1.2.2 dragover事件，用来确定给用户显示怎样的反馈信息。
如果这个事件被取消，反馈信息（通常就是光标）就会基于 dropEffect 属性的值更新。
第二步修改代码
var $box,$in;
window.onload=function(){
//ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
$box = document.getElementsByClassName('box')[0];
$in =document.getElementsByClassName('inter')[0];
// $box.ondragenter=function(e){
// //监听事件，返回信息
// showOb(e);
// }
$box.ondragover = function(e){
e.preventDefault()
//阻止系统默认事件
}
$box.ondrop = function(e){
showOb(e.dataTransfer);
}
}
function showOb(obj){
//打印事件信息
var s ='';
for(var k in obj){
s += k+':'+obj[k]+'<br/>'
}
$in.innerHTML= s;
}
所求
最终额js代码做成可以在两个div之间拖动的效果
总代码如下
var $box1,$in,$img1,$box2;
window.onload=function(){
//ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
$box1 = document.getElementsByClassName('box1')[0];
$box2 = document.getElementsByClassName('box2')[0];
$in =document.getElementsByClassName('inter')[0];
$img1 =document.getElementById('img1')
// $box.ondragenter=function(e){
// //监听事件，返回信息
// showOb(e);
// }
$box1.ondragover = function(e){
e.preventDefault()
//阻止系统默认事件
}
$box2.ondragover = function(e){
e.preventDefault()
//阻止系统默认事件
}
$img1.ondragstart=function(e){
e.dataTransfer.setData('imgid','img1');
}
$box1.ondrop = function(e){
// showOb(e.dataTransfer);
e.preventDefault();
//创建节点
var img = document.getElementById(e.dataTransfer.getData('imgid'))
// $box1.appendChild(img)
//上面是在一个区域拖动，为了实现多个区域拖动我们进行如下修改
e.target.appendChild(img)
}
$box2.ondrop = function(e){
e.preventDefault();
//创建节点
var img = document.getElementById(e.dataTransfer.getData('imgid'))
// $box2.appendChild(img)
//上面是在一个区域拖动，为了实现多个区域拖动我们进行如下修改
e.target.appendChild(img)
}
}
function showOb(obj){
//打印事件信息
var s ='';
for(var k in obj){
s += k+':'+obj[k]+'<br/>'
}
$in.innerHTML= s;
}