H5中元素的拖放

HTML5的拖放

 

拖放

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

属性和方法

• 设置元素为可拖放(让元素可以拖动)

<img draggable="true">

 

• 拖动什么 
  
  • 事件：ondragstart—-规定当元素被拖动的时候会发生什么
  • 方法：dataTransfer.setData(数据类型，可拖动元素的id)—-设置被拖数据的数据类型和值

<!-- img可以拖动，拖动时调用函数drag（event），规定被拖动的数据-->
<img id="drag1" src="/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=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=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data))
    }
</script>