zoukankan      html  css  js  c++  java
  • html5拖放API Amy

    一、draggable属性的设置

      将想要拖放的元素的draggable属性设置为true,img元素和有href属性的a元素默认是允许拖放的

    二、与拖放有关的事件

    事件 产生事件的元素 描述
    dragstart 被拖放的元素source 开始拖放操作
    drag 被拖放的元素source 拖放过程中
    dragenter 拖放过程中鼠标经过的元素 被拖放元素开始进入本元素范围
    dragover 拖放过程中鼠标经过的元素 被拖放元素在本元素范围内移动
    dragleave 拖放过程中鼠标经过的元素 被拖放元素离开本元素的范围
    drop 拖放的目的地dest 有元素被拖放到本元素中
    dragend 拖放的对象元素 拖放操作结束

    三、DataTransfer对象:1.自定义拖放图标 2.携带数据 3.拖放的视觉效果

    DataTransfer对象的属性和方法 描述
    dropEffect属性 拖放的视觉效果,但是该属性值的设定必须在effectAllowed属性值允许的范围内,有复制效果,移动效果等
    effectAllowed属性 允许拖放的视觉效果
    type属性 携带数据的类型
    clearData(DOMString format)方法 清楚DataTransfer对象中的数据,如果省略参数则是全部清除
    setDta(DOMString format,DOMString data)方法 向DataTransfer对象中存入数据
    getData(DOMString format)方法 读取DataTransfer对象中保存的数据
    setDragImage(Element image,long x,long y) 设置拖放图标
    function init(){
        var source=document.getElementById("source");
        var dest=document.getElementById("dest");
        source.addEventListener("dragstart", function(ev){
            var data=ev.dataTransfer;//生成dataTransfer对象
            data.effectAllowed="all";//设置允许的拖放视觉效果
            var icon=document.createElement("img");//创建图像
            icon.src="http://hdn.xnimg.cn/photos/hdn321/20091015/0955/tiny_GkFr_16185d019116.jpg";
            data.setDragImage(icon,-10,10);//设置拖放图标
            data.setData("text/plain","您好,我是被拖拽的元素");//向dataTransfer对象中追加数据
        },false);
        dest.addEventListener("dragend", function(ev){
            ev.preventDefault();//dragenddragover以及drop事件中,调用preventDefault方法,
    //因为目标元素一般都不允许接受其他元素的到来的,因此为了使被拖放元素进入该目标元素,必须将默认处理关掉
    },false); dest.addEventListener("drop",function(ev){ var data=ev.dataTransfer; var text=data.getData("text/plain");//获取源元素拖放时存入的数据 dest.textContent+=text; ev.preventDefault(); ev.stopPropagation(); },false); } document.ondragover=function(e){ e.preventDefault(); } document.ondrop=function(e){ e.preventDefault();

     

     

  • 相关阅读:
    ADB常用命令
    Java内部开发框架
    Android开发的十个建议
    通过浏览器访问网站的过程
    CDN的概念和解决的问题
    nginx实现range请求
    Nginx如何重新编译添加模块
    MP4文件在线播放首屏慢的问题
    Ubuntu下添加程序到应用程序
    一致性hash
  • 原文地址:https://www.cnblogs.com/amy2011/p/3078030.html
Copyright © 2011-2022 走看看