您的位置：首页 > Web前端 > HTML5

XHTML5 ----- 拖拽事件（拖拽一段文字和图片案例）

2015-09-24 23:39 579 查看

1、拖拽一段文字

功能实现：

拖拽一段文字到一个区域，复制进去

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

<div id="div1" ></div>

<br />

<p id="drag1">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

这里p中的类容就是待拖拽的东西 div1为目标区域，首先要让这段文字拖拽，第一步要设置p 元素的draggable属性为"true"

然后绑定事件--开始拖拽事件

ondragstart="drag(event)"

在这个事件中我们应该处理什么事情呢？

我们设置要发出拖拽的数据，观察PPT上的信息

我们应该设置data在js中设置发送

ev.dataTransfer.setData("Text",ev.target.id);

这时候开始拖拽

这时候观察页面

然后我们应该在规定好的区域开始接受，接受之前给div绑定事件

ondrop="drop(event)"

我们开始在js中写接受

var data= e.dataTransfer.getData('Text')---接收数据

ev.target.appendChild(document.getElementById(data));--将接受的数据添加到当前区域

注意：

1. 若想触发ondrop事件，ondragover 中需要阻止默认事件（元素默认是不允许放置的）。

2. 在Firefox 3.5+中，如果是把图像拖放到放置目标上，页面就会转向图像文件；而如果是把文本拖放到放置目标上，则会导致无效URL错误，因此，为了让Firefox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL。

组织浏览器默认行为e.preventDefault();

当接收完毕之后再组织默认行为一次

ondragover="allowDrop(event)"

function allowDrop(ev)

{

ev.preventDefault();

}

完整代码如下：

<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(e){
e.dataTransfer.setData("Text",e.target.id);
}
function drop(e){
var data= e.dataTransfer.getData('Text')
e.target.appendChild(document.getElementById(data));
e.preventDefault();
}
</script>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

2、拖拽图片的案例

1.创建拖拽对象

①给需要拖拽的元素设置draggable属性，它有三个值：

true：元素可以被拖拽；

false：元素不能被拖拽；

auto：浏览器自己判断元素是否能被拖拽。

2.处理拖拽事件

①当我们拖拽对象的时候会触发拖拽事件包括：

A.dragstart：当元素拖拽开始触发；

B.drag：在元素拖拽过程中触发；

C.dragend：元素拖拽结束时触发

3.创建投放区

①当拖拽对象进入投放区的时候会触发相关的事件

A.dragenter：当拖拽对象进入投放区时触发；

B.dragover：拖拽对象在投放区内移动时触发；

C.dragleave：拖拽对象没有投放到投放区，离开投放区的时候触发；

D.drop：拖拽对象投放在投放区时触发。

②注意：dragenter、dragover可能会受到默认事件的影响，所以我们在这两个事件当中使用 e.preventDefault();来阻止事件默认事件

4.使用dataTransfer传递数据

当我们需要拖拽对象向投放区传递数据的时候用到 dataTransfer有下面的属性和方法：

1.types：返回数据的格式；

2.getData(<format>)：返回指定格式数据；

3.setData(<format>, <data>)：设置指定格式数据；

4.clearData(<format>)：移除指定格式数据；

5.files：返回已经投放的文件的信息数组。

1.type：文件类型

2.size:文件大小

3.name:文件名

完整代码：

<div id="layer1">
<img src="images/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="layer2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<script type="text/javascript">
function drag(e){
e.dataTransfer.setData('Text', e.target.id);
}
function allowDrop(e){
e.preventDefault();//
}
function drop(e){
var data= e.dataTransfer.getData('Text');
e.target.appendChild(document.getElementById(data));
e.preventDefault();//
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

XHTML5 ----- 拖拽事件 （拖拽一段文字和图片案例）

XHTML5 ----- 拖拽事件（拖拽一段文字和图片案例）