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();

     

     

  • 相关阅读:
    通过在vs中”程序包管理器控制台“的输入命令来实现下载和安装所需版本的Mysql.data和Mysql.Data.Entity.EF6
    ireport使用问题
    mysql数据库迁移到达梦数据库
    Idea配置热部署
    阿里云双12年终钜惠
    移动端弹性布局方案lib-flexible实践
    阿里云服务器2折起
    javascript百度地图使用(根据地名定位、根据经纬度定位)
    js拖拽上传图片
    javascript xml转json
  • 原文地址:https://www.cnblogs.com/amy2011/p/3078030.html
Copyright © 2011-2022 走看看