HTML5新增的拖放API

其实所谓的拖放就是拖动那个元素，然后就会打开一个新的页面，根据拖动元素所随带的信息来实现不同的功能。如果没有携带，则有浏览器自己来决定如何做。

<body>
    <div id="source" style="width:80px;height:80px;border:1px solid black; " draggable="true">
    我不想让你知道我是谁
    </div>
    <script type="text/javascript">
        var source = document.getElementById("source");
        source.ondragstart = function(evt){
            evt.dataTransfer.setData("text/plain" , "http://www.sina.com");
        }
    </script>
</body>

-------》在拖动的时候图片上方会显示“禁止”图标。document对象默认阻止了拖动事件，而其他HTML组件也是位于document对象内的，因此它们也不能接受“放”。

所以需要在script代码中添加对于“放”的处理。

通过javascript代码把该元素移动到相应的位置：

<body>
<div id="source" style="width:80px;height:80px;
    border:1px solid black;
    background-color: #bbb;"
    draggable="true">疯狂</div>
<script type="text/javascript">
    var source = document.getElementById("source");
    source.ondragstart = function(evt)
    {
        // 让拖动操作携带数据
        evt.dataTransfer.setData("text/plain" , "www.fkjava.org");
    }
    document.ondragover = function(evt)
    {
        // 取消事件的默认行为
        return false;
    }
    document.ondrop = function(evt)
    {
        source.style.position = "absolute";
        source.style.left = evt.pageX + "px";
        source.style.top = evt.pageY + "px";
        // 取消事件的默认行为
        return false;
    }
</script>
</body>

------->DataTransfer对象

拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个DataTransfer对象，该对象包含如下属性和方法。

通过DataTransfer对象，可以让拖放操作实现更丰富的功能-----开发者可以在拖放开始时，将拖放源的数据存入DataTransfer对象中，然后在拖放结束时从DataTransfer对象读取数据，这样就可以完成更复杂的拖放操作。

实现一个允许通过拖放来添加、删除“收藏项”的功能。

<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 通过拖放实现添加、删除 </title>
    <style type="text/css">
        div>div{
            display: inline-block;
            padding: 10px;
            background-color: #aaa;
            margin: 3px;
        }
    </style>
</head>
<body>
<div style="width:600px;border:1px solid black;">
<h2>可将喜欢的项目拖入收藏夹</h2>
<div draggable="true" ondragstart="dsHandler(event);">疯狂Java联盟</div>
<div draggable="true" ondragstart="dsHandler(event);">疯狂软件教育</div>
<div draggable="true" ondragstart="dsHandler(event);">关于我们</div>
<div draggable="true" ondragstart="dsHandler(event);">疯狂成员</div>
</div>
<div id="dest"
    style="width:400px;height:260px; 
    border:1px solid black;float:left;">
    <h2 ondragleave="return false;">收藏夹</h2>
</div>
<img id="gb" draggable="false" src="garbagebin.png"
    alt="垃圾桶" style="float:left;"/>
<script type="text/javascript">
    var dest = document.getElementById("dest");
    // 开始拖动事件的事件监听器
    var dsHandler = function(evt)
    {
        // 将被拖动元素的innerHTML属性值设置成被拖动的数据
        evt.dataTransfer.setData("text/plain"
            , "<item>" + evt.target.innerHTML);
    }
    dest.ondrop = function(evt)
    {
        var text = evt.dataTransfer.getData("text/plain");
        // 如果该text以<item>开头
        if (text.indexOf("<item>") == 0)
        {
            // 创建一个新的div元素
            var newEle = document.createElement("div");
            // 以当前时间为该元素生成一个唯一的ID
            newEle.id = new Date().getUTCMilliseconds();
            // 该元素内容为“拖”过来的数据
            newEle.innerHTML = text.substring(6);
            // 设置该元素允许拖动
            newEle.draggable="true";
            // 为该元素的开始拖动事件指定监听器
            newEle.ondragstart = function(evt)
            {
                // 将被拖动元素的id属性值设置成被拖动的数据
                evt.dataTransfer.setData("text/plain"
                    , "<remove>" + newEle.id);
            }
            dest.appendChild(newEle);
        }

    }
    // 当把被拖动元素“放”到垃圾桶上时激发该方法。
    document.getElementById("gb").ondrop = function(evt)
    {
        var id = evt.dataTransfer.getData("text/plain");
        // 如果id以<remove>开头
        if (id.indexOf("<remove>") == 0)
        {
            // 根据“拖”过来的数据，获取被拖动的元素
            var target = document.getElementById(id.substring(8));
            // 删除被拖动的元素
            dest.removeChild(target);
        }
    }
    document.ondragover = function(evt)
    {
        // 取消事件的默认行为
        return false;
    }
    document.ondrop = function(evt)
    {
        // 取消事件的默认行为
        return false;
    }
</script>
</body>

------>拖放行为

设置effectAllowed、dropEffect两个属性可以控制施放行为。

effectAllowed用于控制被拖动元素的拖动行为，因此通常建议在ondragstart事件监听器中设置DataTransfer对象的effectAllowed属性；而dropEffect则控制被“放”入的目标组件的行为，因此通常建议在ondragover事件监听器中设置DataTransfer对象的dropEffect属性。

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 拖放行为 </title>
</head>
<body>
<div id="source" draggable="true" style="width:80px;height:60px;
    border:1px solid black;">拖动我</div>
<script type="text/javascript">
    var source = document.getElementById("source");
    var dest = document.getElementById("text");
    source.ondragstart = function(evt)
    {
        var dt = evt.dataTransfer;
        // 可设置move、copy等属性值看看效果
        dt.effectAllowed = 'link';    
        dt.setData("text/plain", "www.fkjava.org");
    }
    // 允许拖动
    document.ondragover = function(e){return false;};
</script>
</body>

改变拖动图标：

<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 拖放行为 </title>
</head>
<body>
<div id="source" draggable="true" style="width:80px;height:60px;
    border:1px solid black;">拖动我</div>
<script type="text/javascript">
    var source = document.getElementById("source");
    var dest = document.getElementById("text");
    var myIcon = document.createElement("img");
    myIcon.src = "my.gif";
    source.ondragstart = function(evt)
    {
        var dt = evt.dataTransfer;
        // 可设置move、copy等属性值看看效果
         dt.effectAllowed = 'link';
        dt.setDragImage(myIcon ,

0 , 0

);
        dt.setData("text/plain", "www.fkjava.org");
    }
    // 允许拖动
    document.ondragover = function(e){return false;};
</script>
</body>
</html>

posted @ 2015-12-18 11:10 Ievery 阅读(170) 评论(0) 收藏举报

刷新页面返回顶部

Ievery

HTML5新增的拖放API

公告