HTML5拖放API

1、  开启拖放

        将将要拖放的对象元素的draggable属性设置为true，任何元素均可实现拖放，但img与a元算（必须制定href）默认允许拖放。
2、与拖放相关的事件
事件 产生事件的元素 描述
dragstart 被拖放的元素 开始拖放操作
drag 被拖放的元素 拖放过程中
dragenter 拖放过程中鼠标经过的元素 被拖放的元素开始进入本元素的范围内
dragover 拖放过程中鼠标经过的元素 被拖放的元素正在本元素的范围内移动
dragleave 拖放过程中鼠标经过的元素 被拖放的元素离开本元素的范围
drop 拖放的目标元素 有其他元素被拖放到本元素中
dragend 拖放的对象元素 拖放操作结束 

  1. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function init(){
var source = document.getElementById('dragme');
var dest = document.getElementById("text");
//拖动开始
source.addEventListener("dragstart",function(ev){
//向dataTransfer对象添加数据
var dt = ev.dataTransfer;
dt.effectAllowed = "all";
//拖动元素为dt.setData("text/plain",this.id);
dt.setData("text/plain","您好");
},false);
//拖放结束
dest.addEventListener("dragend",function(ev){
//不执行默认处理(拒绝被拖放)
ev.preventDefault();
},false);
//drop：被拖放
dest.addEventListener("drop",function(ev){
//从DataTransfer对象那里取得数据
var dt = ev.dataTransfer;
var text = dt.getData("text/plain");
dest.textContent += text;
//不执行默认处理（拒绝被拖放）
ev.preventDefault();
ev.stopPropagation();
},false);
}
//设置页面属性，不执行默认处理(拒绝被拖放)
document.ondragover = function(e){
e.preventDefault();
}
document.ondrop = function(e){
e.preventDefault();
}
</script>
</head>
<body onload="init();">
<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>
</html>

     


        针对拖放的目标元素，必须在dragend或dragover事件内调用“事件对象.preventDefault()”方法。因为默认情况下，拖放的目标元素是不允许接受元素的，为了把元素拖放到其中，必须关闭默认处理。
 
        要实现拖放过程，还必须在目标元素的drop事件中关闭默认处理(拒绝被拖放)，否则拖放处理也不能实现。因为页面实现与其他元素接受拖放的，如果页面上拒绝拖放，那么页面上其他元素就不能接受拖放了。
 
        要实现拖放过程，还必须设定整个页面为不执行默认处理(拒绝被拖放)，否则被拖放处理也不能实现。因为页面是先于其他元素接受拖放的，如果页面上拒绝拖放，那么页面上其他元素不能接受拖放了。
 
        为了让拖放在所有支持拖放API的浏览器中都能正常运行，需要制定"-webkit-user-drag:element"这种Webkit特有的CSS属性。
 
3、MIME类型
    ·text/plain：文本文字
    ·text/html：HTML文字
    ·text/xml：XML文字
    ·text/uri-list：URL列表，每个URL为一行
 
4、js的dataTransfer对象
 
        提供对于预定义的剪贴板格式的访问,以便在拖拽中使用。
属性 描述 参数
dropEffect 设置或返回拖放目标上允许发生的拖放行为和要显示的光标类型
copy 复制样式被显示
link  链接样式被显示
move  移动样式被显示
none  默认,没有鼠标样式被定义
effectAllowed 设置或返回被拖动元素允许发生的拖动行为与该对象的源元素。
copy 选项被复制
link  选项被dataTransfer作为link方式保存
move  当放置时,对象被移动至目标对象
copylink  选项是被复制还是被作为link方式保存关键在于目标对象
linkmove 选项是被作为link方式保存还是被移动关键在于目标对象
all 所有效果都被支持
none 不支持任何效果
uninitialized 默认不能通过这个属性传递任何值
types 存入数据的种类，字符串的伪数组  
clearData() 清除DataTransfer对象中存放的数据，如果省略参数format，则清楚全部数据  
setData(format,data) 将指定格式的数据赋值给dataTransfer对象 参数format定义数据的格式也就是数据的类型，data为待赋值的数据
getData(format,data)
 从dataTransfer对象中获取指定格式的数据 format代表数据格式，data为数据。
setDragImage(Element image，long x,long y) 用img元素来设置拖放图标(部分浏览器中可以用canvas等其他元素来设置) element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。
        
        effectAllowed定义了在源对象上的操作,可定义在ondragstart事件中。 
        dropEffect定义了在目标对象上的操作,可定义在ondrop,ondragenter,ondragover事件中。 
        effectAllowed可以定义all操作,但是dropEffect可以定义copy操作。
 
5、设定拖放时的视觉效果
        DataTransfer对象的dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许设定的值为none、link、move。dropEffect属性所表示的实际视觉效果必须与effectAllowed属性值所表示的允许操作相匹配，规则如下所示：
        *如果effectAllowed属性设定为none，则不允许拖放元素。
        *如果dropEffect属性设定为none，则不允许拖放元素。
        *如果effectAllowed属性设定为all或不设定，则dropEffect属性允许被设定为任何值。
        *如果effectAllowed属性设定为具体操作，而dropEffect属性也设定了具体视觉效果，则dropEffect属性值必须与effectAllowed属性值相匹配，否则不允许将被拖放元素拖放到目标元素中。
 
6、自定义拖放图标
        setDragImage(Element image，long x,long y)，第一个参数image是设定拖放图标的图标元素，第二个参数x为拖放图标离鼠标指针的X轴方向的唯一量，第三个参数y为拖放图标离鼠标指针的y轴方向的位移量。
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function init(){
                var dragIcon = document.createElement("img");
                dragIcon.src ='https://www.baidu.com/img/bdlogo.png';
                var source = document.getElementById('dragme');
                var dest = document.getElementById("text");
                source.addEventListener('dragstart',function(ev){
                    var dt = ev.dataTransfer;
                    dt.setDragImage(dragIcon,-10,-10);
                    dt.effectAllowed = "copy";
                    dt.setData("text/plain","您好");
                },false);
                dest.addEventListener('dragend',function(ev){
                    ev.preventDefault();
                },false);
                dest.addEventListener('dragover',function(){
                    var dt = ev.dataTransfer;
                    dt.dropEffect = "copy";
                    ev.preventDefault();
                },false);
                dest.addEventListener('drop',function(ev){
                    var dt = ev.dataTransfer;
                    var text = dt.getData("text/plain");
                    dest.textContent +=text;
                    ev.preventDefault();
                    ev.stopPropagation();
                },false);
            }
            document.ondragover = function(e){
                e.preventDefault();
            };
            document.ondrop = function(e){
                e.preventDefault();
            }
        </script>
    </head>
    <body onload="init();">
        <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>
</html>

 

 
 
 
posted @ 2015-08-31 22:07  staven  阅读(3008)  评论(0)  编辑  收藏  举报