H5简单拖放(Drag/Drop)

Posted Mr.TongYu、

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5简单拖放(Drag/Drop)相关的知识,希望对你有一定的参考价值。

 

  前  言

---------

拖拽(Drag/Drop)是个非常普遍的功能。在使用电脑的过程中,拖放一个东西是相当常见。很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件。在html5中,拖拽(draganddrop)成为了标准操作,任何元素都可以进行拖放。下面就了解一下简单的H5拖放。

 

先上代码:

(代码运行时,可以打开控制台)

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        #div1,#div2{
            width:600px; 
            height:400px;
            padding:10px;
            border:1px solid red;
            float: left;
            }
    </style>
    <script type="text/javascript">
        function allowDrop(ev){
            //重写dragover事件的默认行为,将无效放置目标设置为可放置目标
            ev.preventDefault();
            console.log("正在目标中移动");
        }
        function drag(ev){
            //重写dragover事件的默认行为,将无效放置目标设置为可放置目标
            ev.dataTransfer.setData("Text",ev.target.id); // 拖放的数据类型和值
            console.log("拖动开始了");
        }
        function drop(ev){
            ev.preventDefault();
            //保存在dataTransfer对象中的数据只能在drop事件处理程序中读取
            //元素拖到放置目标中会触发drop事件。
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
            console.log("拖放成功了");
        }
        function enter(){
            console.log("进入目标区了");    
        }
        function leave(){
            console.log("离开目标区了");    
        }
        function end(){
            console.log("拖放停止了");
        }
        
//        function drags(){
//            console.log("正在拖放移动中");
//        }
        
    </script>
</head>
<body>
<p>请把图片拖放到矩形中:</p>
<!--  
   ondrop :当放置被拖数据时,会发生 drop 事件。
   ondragover :事件规定在何处放置被拖动的数据。
   ondragenter :表示当元素被拖动到放置目标上就会触发,类似于mouseover事件
-->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="enter(event)" ondragleave="leave(event)">
    <p>div1</p>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <p>div2</p>
</div>
 <!--
 draggable="true" :设置元素可被拖放
 ondragstart :拖动开始时,调用一个函数 "drag(event)"
 -->
<img id="drag1" src="img/add.png" draggable="true" ondragstart="drag(event)"
    ondragend="end(event)" />
<!--ondrag="drags(event)"-->
</body>
</html>

 

 

一、设置元素为可拖放

首先,为了使元素可拖动,把 draggable 属性设置为 true 

上面例子代码中:

<img draggable="true" />

 

二、 ondragstart 和 setData()

当元素被拖动时,事件触发,所调用的函数。

上面例子代码中,ondragstart 属性调用了一个函数,drag(event),规定被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值:

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

其中数据类型是 "Text",值是可拖动元素的 id ("drag1")。

 

解释一下dataTransfer对象

事件对象的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据。有二个方法,

(1) getData()  表示可以取得由setData()保存的值。

(2) setData() 它的第一个参数也是getData()方法的唯一个参数,是一个字符串表示保证的数据类型,"text"或者"URL"。

  如果将数据保存为URL浏览器会把它当成网页中的链接,当把它放置到地址栏上会打开该URL。

 

三、在何处放置 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

由于默认的是,无法将数据元素放置到其他元素中。如果需要设置允许放置,就必须阻止对元素的默认处理方式。

这就要通过调用 ondragover 事件的 event.preventDefault() 方法:

调用 preventDefault()就是用来避免浏览器对数据的默认处理

event.preventDefault()

 

四、放置 - ondrop

当放置被拖数据时,会发生 drop 事件。

上面例子代码中,ondrop 属性调用了一个函数,drop(event):

function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

 


五、拖放(Drag 和 Drop)各属性


 [作用在被拖拽的元素上的事件]:

ondragstart表示按下鼠标键并开始移动鼠标的时,进行触发。(对象是被拖拽元素)

ondragdragstart事件触发完随即触发drag事件,在元素拖动期间不停的触发该事件,与mousemove事件类似。(对象是被拖拽元素)

ondragend当拖动停止时,无论是放在有效还是无效目标上会触发dragend事件。(对象是被拖拽元素)

[作用在目标元素上的事件]:

ondragenter表示当元素被拖动到放置目标上就会触发,类似于mouseover事件。(对象是目标元素)

ondragover随即触发dragover事件,且被拖动元素一直在放置目标的范围内移动就一直持续触发。(对象是目标元素)

ondragleavedragover事件不再发生,他会触发dragleave事件,类似于mouseout事件,如果元素放到了放置目标中,则会触发drap事件而不是dragleave事件。(对象是目标元素)

ondrop被拖拽的元素在目标元素上鼠标放开时触发事件。(对象是目标元素)

 

下面看一下效果:

 

 

 

 



 

以上是关于H5简单拖放(Drag/Drop)的主要内容,如果未能解决你的问题,请参考以下文章

在 WPF 中检测 Drag'n'Drop 文件?

jQuery Drag&Drop:拖动一个封闭元素

使用 HTML5 Drag'n'Drop 进行列表排序 - 根据鼠标放置在上方或下方

在 Web 浏览器上捕获 DragEnter 和 Drag Drop 事件

WPF实现Drag/Drop操作

原生 drag drop HTML5