Html5 拖放(drag 和 drop)



<html>
<head>
    <title>1title>

    <style type="text/css" >
        #div1{width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    style>
    <script type="text/javascript">
        function allowDrop(ev)
        {
            ev.preventDefault();
        }
        //规定了被拖动的数据
        function drag(ev)
        {
            //dataTransfer.setData() 方法设置被拖数据的数据类型和值
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        function drop(ev)
        {
            ev.preventDefault();
            //调用 preventDefault() 来避免浏览器对数据的默认处理
            var data=ev.dataTransfer.getData("Text");
            //通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
            ev.target.appendChild(document.getElementById(data));
            //把被拖元素追加到放置元素(目标元素)中
        }
    script>
head>
<body>

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

<img id="drag1" src="1.gif" draggable="true" ondragstart="drag(event)"/>
body>
html>

你可能感兴趣的:(Html5 拖放(drag 和 drop))