关闭

html5中介绍的是拖动一个元素到指定的元素框内

657人阅读 评论(0) 收藏 举报
分类:

这里我把代码块分开,先介绍一下script,body部分

<script type="text/javascript">
function allowDrop(ev)
{

//默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式,所以这里调用一次

ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id); //dataTransfer.setData() 方法设置被拖数据的数据类型和值:数据类型是 "Text",值是可拖动元素的 id ("drag1")。
}
function drop(ev)//当放置被拖数据时,会发生 drop 事件。
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text"); //通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
ev.target.appendChild(document.getElementById(data));//把被拖元素追加到放置元素(目标元素)中
}
</script>


    <body>
        <p>请图片拖放到矩形中:</p>
    

       <!--draggable 属性设置为 true :表示img属性能拖动->

     <!--ondragstart 表示属性调用了一个函数,drag(event),它规定了被拖动的数据->


        <img id="drag1" src="/Users/ju/Desktop/1.png" draggable="true" ondragstart="drag(event)" style="width: 200px;height: 100px;"/>

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

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:83005次
    • 积分:1162
    • 等级:
    • 排名:千里之外
    • 原创:35篇
    • 转载:18篇
    • 译文:8篇
    • 评论:15条
    最新评论