拖放实例

最新推荐文章于 2021-06-30 21:50:05 发布

mcbeath

最新推荐文章于 2021-06-30 21:50:05 发布

阅读量324

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/mcbeath/article/details/77142434

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>拖放示例</title>
<script type="text/javascript">
function init() 
{
    var source = document.getElementById("dragme");
    var dest = document.getElementById("text");
    // (1) 拖放开始
    source.addEventListener("dragstart", function(ev) 
    {
        var dt = ev.dataTransfer;
        //设定effectAllowed属性
        dt.effectAllowed = 'copy';    
        dt.setData("text/plain", "你好"); 
    }, false);
    dest.addEventListener("dragover", function(ev) 
    {
        var dt = ev.dataTransfer;
        //设定dropEffect属性
        dt.dropEffect = 'copy'; 
        ev.preventDefault();
      }, false);


    // (3) dragend：拖放结束
    dest.addEventListener("dragend", function(ev) 
    {
        //不执行默认处理（拒绝被拖放）
        ev.preventDefault();
    }, false);
    // (4) drop:被拖放
    dest.addEventListener("drop", function(ev) 
    {
        // 从DataTransfer对象那里取得数据
        var dt = ev.dataTransfer;
        var text = dt.getData("text/plain");
        dest.textContent += text;
        //(5) 不执行默认处理（拒绝被拖放）
        ev.preventDefault();
        //停止事件传播
        ev.stopPropagation();
    }, false);
}
//(6) 设置页面属性，不执行默认处理（拒绝被拖放）
document.ondragover = function(e){e.preventDefault();};
document.ondrop = function(e){e.preventDefault();};
</script>
</head>
<body οnlοad="init()">
<h1>简单拖放示例</h1>
<!-- (7) 把draggable属性设为true -->
<div id="dragme" draggable="true" style="width: 200px; border: 1px solid gray;">
  请拖放
</div>
<div id="text" style="width: 200px; height: 200px; border: 1px solid gray;"></div>
</body>

我的个人网站：http://mcbeath.cn