HTML5拖放

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bingling2015/p/4409662.html

文章标签：

#javascript #ViewUI

拖放，即将一个东西拖到另一个位置。

案例1：
<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1,#div2 {width:200px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script type="text/javascript">
        function allowDrop(ev)
        {
            ev.preventDefault();
        }
//ev.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
        function drag(ev)
        {
            ev.dataTransfer.setData("Text",ev.target.id);
        }
//setData-----以指定格式给dataTransfer对象赋予数据，id("drag1")；

        function drop(ev)
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
//调用preventDefault()来避免浏览器对数据的默认处理（drop事件的默认行为是以链接形式打开）；
//getData--------通过dataTransfer对象从剪贴板获取指定格式的数据，id("drag1")；
//appendChild----把被拖动元素追加到放置元素后；


    </script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<img id="drag1" src="download.png" draggable="true" ondragstart="drag(event)" />

//ondrop----------进行放置；
//ondragover------把图片拖动到哪里；

//draggable-------属性设置为true，即图片可拖动；
//ondragstart-----拖动图片；

</body>
</html>

效果图：（浏览器支持情况下）