首页 > 代码库 > H5中元素的拖放

H5中元素的拖放

2024-10-14 09:42:02   216人阅读

HTML5的拖放

 

拖放

  • 抓取对象后放在另一个位置

属性和方法

  • 设置元素为可拖放(让元素可以拖动)
<img draggable="true">

 

  • 拖动什么 
    • 事件：ondragstart—-规定当元素被拖动的时候会发生什么
    • 方法：dataTransfer.setData(数据类型，可拖动元素的id)—-设置被拖数据的数据类型和值
<!-- img可以拖动，拖动时调用函数drag（event），规定被拖动的数据-->
<img id="drag1" src="http://www.mamicode.com/omages/lodo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

<!-- 数据类型是 "Text"，值是可拖动元素的 id ("drag1")-->
function drag(ev)
{
 ev.dataTransfer.setData("Text",ev.target.id);
}

 

 
  • 放到何处 
    • 事件：ondragover–规定在何处放置被拖动的元素，放在哪个元素上就写在哪个元素上
    • 需要设置允许放置，我们必须阻止对元素的默认处理方式
ev.preventDefault()

 

  • 进行放置 
    • 属性：ondrop—防止被拖数据时，放生drop事件
//ondrop 属性调用了一个函数，drop(event)
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

function drop(ev)
{
    //drop 事件的默认行为是以链接形式打开
    ev.preventDefault();
    //通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    //被拖数据是被拖元素的 id ("drag1")
    var data=http://www.mamicode.com/ev.dataTransfer.getData("Text");
//把被拖元素追加到放置元素（目标元素）中
    ev.target.appendChild(document.getElementById(data));
}

 

  • 整个实例
<div id="div1" ondrop="drap(event)" ondragover="allDrap(event)"></div>
<em draggable="true" ondragstart="drop(event)" id="drag1">放进去</em>
<script>
    function allDrap(ev){
        ev.preventDefault();
    }
    function drop(ev){
        ev.dataTransfer.setData("Text",ev.target.id);

    }
    function drap(ev){
        ev.preventDefault();
        var data=http://www.mamicode.com/ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data))
    }
</script>

 

H5中元素的拖放


联系
我们