draggable属性和dataTransfer对象

来源：互联网发布：linux查看centos版本编辑：程序博客网时间：2024/05/21 19:23

首先说下HTML5里新增的draggable属性

在Html5中，默认<img.../>和设置了href的<a>是可拖动的，其他都需手动把元素的draggable属性设置为true

然后使元素携带数据应该为被拖动元素的ondragstart（开始拖动触发该事件）事件指定监听器，在监听器中让拖动操作可以携带数据。

之后为了让document接受放的动作，为documen的ondragover事件设定监听器，在监听器中取消document对拖动事件的默认行为。

然而，不同浏览器在元素拖到指定位置释放之后默认的动作是不同的（firefox释放后会跳转到新页面，chrome则没有任何动作），所以

我们要取消拖放操作的默认动作，为document的ondrop绑定监听器

例如，一个允许自由拖动的div:

[html] view plain copy
<span style="font-family:Microsoft YaHei;font-size:12px;"><!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>  
<title>可拖动</title>  
<style type="text/css">  
#source{  
    border: 1px solid #000000;  
    background-color: #ccc;  
    width: 80px;  
    height: 80px;  
}  
</style>  
  
</head>  
<body>  
<div id="source">  
HELLO WORLD。  
</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>  
</html>  
</span>  

附：触发事件

ondragstart：开始拖动时触发

ondrag：拖动过程中不断触发

ondragend：拖动结束时触发

ondragenter：被拖动元素进入本元素的范围内时触发

ondragover：被拖动元素进入本元素的范围内拖动时不断触发

ondragleave：被拖动元素离开本元素时触发

ondrop：其他元素被放到了本元素时触发

再来说下DataTransfer对象

拖放触发的拖放事件有一个dataTransfer的属性，该属性值是一个DataTransfer对象

对象属性:

dataTransfer.dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许为“null”、“copy”、“link”和“move”四值之一。
dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
dataTransfer.items:该属性返回DataTransferItems对象，该对象代表了拖动数据。
dataTransfer.setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图表，x，y分别为鼠标水平方向和竖直方向的距离。
dataTransfer.addElement（element）：添加自定义图标。
dataTransfer.types:该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。
dataTransfer.getData(ormat)：获取DataTransfer对象中format格式的数据
dataTransfer.setData(format，data)：向DataTransfer对象中设置format格式的数据。
dataTransfer.clearData([format]):清除DataTransfer对象中format格式的数据，如果省略format，则清楚全部数据。

下面展示一个允许通过拖动来添加，删除”收藏夹“功能

[html] view plain copy
<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>  
<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 #ccc;">  
    <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="widh:400px;height:400px;border:1px solid #ccc;float:left;">  
    <h2 ondragleave="return false;">收藏夹</h2>  
</div>  
 <div id="gb" draggable="false" style="width:100px;height:100px;border:1px solid red;float:left;">我是垃圾桶</div>  
<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>  
</html>  


  转载自cyseria的博客：原文链接 http://blog.csdn.net/cyseria/article/details/38354291

阅读全文

0 0