怎样用H5实现拖放结果--百分百源码网

怎样用H5实现拖放结果-

发布时间：08/01 来源：未知浏览：关键词：

这次给大家带来怎样用H5实现拖放结果，用H5实现拖放结果的注意事项是什么，下面就是实战案例，一起来看一下。这次给大家带来怎样用H5实现拖放结果，用H5实现拖放结果的注意事项是什么，下面就是实战案例，一起来看一下。

拖放

拖放是一种常见的特性，即抓取对象今后拖到另一个位置。

在 HTML5 中，拖放是规范的一局部，任何元素都能够拖放。

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支撑拖动。

注意:Safari 5.1.2不支撑拖动.

实例:

  
  
  
    拖放  
      
    《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》

第一，为了使元素可拖动，把draggable 属性设定为 true ：

然后，规定当元素被拖动时，会产生什么。
在上面的例子中，ondragstart 属性调取了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 办法设定被拖数据的数据类型和值：

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

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

ondragover 事件规定在何处放置被拖动的数据。
默许地，没法将数据/元素放置到其他元素中。要是需要设定允许放置，我们必需阻止对元素的默许处置方式。
这要通过调取 ondragover 事件的 event.preventDefault() 办法：event.preventDefault()

当放置被拖数据时，会产生 drop 事件。
在上面的例子中，ondrop 属性调取了一个函数，drop(event)：

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

代码解释：

调取 preventDefault() 来以免阅读器对数据的默许处置（drop 事件的默许行为是以链接情势打开）
通过 dataTransfer.getData("Text") 办法获得被拖的数据。该办法将返回在 setData() 办法中设定为雷同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（指标元素）中

来回拖动：

若要在两个地方来回拖动，只需将上面代码稍作修改就行了.
将body中的代码改成:

然后在style样式中加上#p2就可以了：

这样就可以实现来回拖放了。

信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相干文章！

举荐浏览：

分页查询的运用详解

字符与数学函数之间的关系

以上就是怎样用H5实现拖放结果的细致内容，更多请关注百分百源码网其它相干文章！

打赏