HTML5 拖放

节我们学习 HTML5 中的拖放，拖放是一种常见的特性，也就是抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

拖放事件

拖放是由拖动与释放两部分组成，拖放事件也分为被拖动元素的相关事件，和容器的相关事件。

被拖动元素的相关事件如下所示：

容器相关事件如下所示：

如何实现元素的拖放

我们通过上述的拖放事件来实现将下图“你好，侠课岛”，拖放到上面的矩形框中的演示效果：

首先创建一个HTML文本，用于测试代码，如下所示：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5学习(9xkd.com)</title>
            <style type="text/css">
                .div1{
                    width:200px;
                    height:100px;
                    padding:20px;
                    border:1px solid #000;
                }
                p{
                    font-size: 28px;
                }
            </style>
        </head>
        <body>
            <div>
                <div class="div1" id="div1" ></div>
                <p id="drag1">你好，侠课岛！</p>
            </div>
        </body>
    </html>

然后，我们要给被拖动元素（也就是在上述的 <p> 标签上），设置一个 draggable 属性，此属性用于规定元素是否可拖动，当属性值为 true 时表示元素可拖动，为 false 表示元素不可拖动。

<p id="drag1" draggable="true">你好，侠课岛！</p>

只有设置了 draggable 属性值为 true ，指定元素才能被拖动。

然后，我们要做的是点击被拖动元素 “你好，侠课岛！”，点击这个元素时需要触发一个 ondragstart 事件，ondragstart 事件会在用户开始拖动元素或选择的文本时触发。调用了一个 drag(event) 函数，在这个函数中规定被拖动的数据，如下所示：

function drag(e){
    e.dataTransfer.setData("Text", e.target.id);
}

代码中的 dataTransfer.setData() 方法用于设置被拖数据的数据类型和值。参数 Text 表示被拖动数据的数据类型，参数 e.target.id 是可拖动元素的 id。

接着，我们将要 “你好，侠课岛！” 拖动到元素容器范围内（矩形框中）。要实现这个步骤，需要在放置拖动元素的容器上绑定一个 ondragover 事件，这个事件用于规定在何处放置被拖动的数据。默认情况下，是无法将一格元素放置到另外一个元素里面的，所以如果需要设置允许放置，则要在 ondragover 事件中加上 e.preventDefault() 方法来阻止默认行为。

function allowDrop(e){
    e.preventDefault();
}

最后，就是要放置被拖动元素，也就是要在元素容器范围内松开鼠标。需要在元素容器上绑定一个 ondrop 事件，如下所示，这个事件会在拖动过程中释放鼠标键时触发。

<div id="div1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>

<script>
    function drop(e){
        e.preventDefault();
        var data = e.dataTransfer.getData("Text");
        e.target.appendChild(document.getElementById(data));
    }
</script>

在 ondrop 事件中同样需要调用 e.preventDefault() 方法来阻止默认行为。然后可以通过 dataTransfer.getData("Text"); 方法获取之前的 drag(event) 函数中保存的信息，也就是被拖动元素的 id。接着通过 target.appendChild() 方法为将拖动元素作为元素容器的子元素追加到元素容器中，这样就能成功实现拖放。

完整代码

完整代码如下所示：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5学习(9xkd.com)</title>
            <style type="text/css">
                .div1{
                    width:200px;
                    height:100px;
                    padding:20px;
                    border:1px solid #000;
                }
                p{
                    font-size: 28px;
                }
            </style>
        </head>
        <body>
            <div>
                <div id="div1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
                <p id="drag1" draggable="true" ondragstart="drag(event)">你好，侠课岛！</p>
            </div>
            <script>
                function drag(e){
                    e.dataTransfer.setData("Text", e.target.id);
                }
                function allowDrop(e){
                    e.preventDefault();
                }
                function drop(e){
                    e.preventDefault();
                    var data = e.dataTransfer.getData("Text");
                    e.target.appendChild(document.getElementById(data));
                }
            </script>
        </body>
    </html>

总结

当我们要对某个元素实行拖放操作时，首先就需将这个元素的 draggable 属性设置为 true，表示允许元素拖动。其中图片和链接默认是可拖动的，不需设置要 draggable 属性。

链接：https://www.9xkd.com/

易拖拽

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft; //拖拽距离
disY=oEvent.clientY-oDiv.offsetTop; //拖拽距离

oDiv.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

oDiv.onmouseup=function ()
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

程序问题:鼠标拖拽过快,鼠标指针与拖拽div对象脱离

解决方法:直接给document加事件(因为div对象范围太小,鼠标移动就与拖拽div对象脱离)

将oDiv改成document对象

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

程序问题: FF下，空Div拖拽Bug(残影)

解决方法: 阻止默认事件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};

return false; //阻止默认事件(拖动残影)
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

防止拖出页面

拖拽 Making Elements Draggable

The drag and drop feature lets you "grab" an object and drag it to a different location.To make an element draggable, just set the draggableattribute to true:

Any HTML element can be draggable.

The API for HTML5 drag and drop is event-based.

HTML5拖放API是基于事件的。

<!DOCTYPE HTML><html><head><script>function allowDrop(ev) {ev.preventDefault();}function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);}function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("text");ev.target.appendChild(document.getElementById(data));}</script></head><body><div id="box" ondrop="drop(event)"ondragover="allowDrop(event)"style="border:1px solid black; width:200px; height:200px"></div><img id="image" src="sample.jpg" draggable="true"ondragstart="drag(event)" width="150" height="50" alt="" /></body></html>

2 拖动什么 What to Drag

When the element is dragged, the ondragstartattribute calls a function, drag(event), which specifies what data is to be dragged.The dataTransfer.setData()method sets the data type and the value of the dragged data:

当元素被拖动时，ondragstart属性调用一个函数drag（event），它指定要拖动的数据。

dataTransfer.setData（）方法设置数据类型和拖动数据的值：

在我们的示例中，数据类型为“text”，值为可拖动元素的ID（“image”）。

3 Where to Drop

The ondragoverevent specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.

This is done by calling the event.preventDefault() method for the ondragoverevent.

ondragover事件指定可以删除拖动数据的位置。默认情况下，数据和元素不能在其他元素中删除。为了允许一个drop，我们必须防止该元素的默认处理。

这可以通过调用ondragover事件的event.preventDefault（）方法来完成。

3 Where to Drop

ondragover事件指定可以删除拖动数据的位置。默认情况下，数据和元素不能在其他元素中删除。为了允许一个drop，我们必须防止该元素的默认处理。

这可以通过调用ondragover事件的event.preventDefault（）方法来完成。

3 Do the Drop

When the dragged data is dropped, a drop event occurs.In the example above, the ondropattribute calls a function, drop(event):

当拖放的数据被丢弃时，会发生丢弃事件。

在上面的例子中，ondrop属性调用一个函数drop（event）：

The preventDefault() method prevents the browser's default handling of the data (default is open as link on drop).

preventDefault（）方法阻止浏览器对数据的默认处理（默认为打开链接）。

The dragged data can be accessed with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method.The dragged data is the ID of the dragged element ("image").

可以使用dataTransfer.getData（）方法访问拖动的数据。该方法将返回在setData（）方法中设置为相同类型的任何数据。

拖动的数据是拖动元素的ID（“image”）。At the end, the dragged element is appended into the drop element, using the appendChild() function.

最后，使用appendChild（）函数将拖动的元素附加到放置元素中。

在线咨询

上一篇：使用 Notepad 或 TextEdit 来编写 HTML
下一篇：HTML的 <dd> 标签定义

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5 拖放

拖放事件

如何实现元素的拖放

完整代码

总结

您的项目需求