欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

HTML5讲解之可拖动dragable属性和其他成员

程序员文章站 2022-04-02 20:33:11
...
[导读]   可拖动dragable属性  之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了。今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧。  在默认情况下,链接、文本和图像是可以

  可拖动dragable属性

  之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了。今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧。

  在默认情况下,链接、文本和图像是可以拖动的,不用再写代码即可拖动。如果想让其他元素标签也可以拖动,那么只有HTML5能实现了。HTML5为所有HTML元素规定了dragable属性,表示元素是否可以拖动。链接和图像的标签中自动将dragable属性自动被设置成true,其他元素的dragable属性的默认值是false。

  支持dragable属性的浏览器有:Firefox 4+、Chrome、IE 10+和Safari 5+。Opera 11.5及之前的版本是不支持HTML5的拖放功能。另外能够让Firefox支持可拖动属性必须添加一个ondragstart事件处理程序,并在dataTransfer对象中保存一些信息才可以。在IE 9及更早版本中,通过mousedown事件处理程序调用dragDrop()方法能够让任何元素可以拖动。在Safari 4及更早的版本中,必须额外给相应的元素设置CSS样式 -khtml-user-drag: element才可以拖动。

  HTML5拖拽其他成员

  之前介绍过有关dataTransfer对象的一些属性,但是并不是很全。下面的一些方法和属性是其中有可能漏掉的属性和方法。

  addElement(element):为拖动操作添加一个元素。添加这个元素只影响数据(即增加作为拖动源而响应回调的对象),不会影响拖动操作时页面元素的外观。直到写这篇博客的时候,只有Firefox 3.5+实现这种方法了。

  clearData(format):清除以特定格式保存的数据。实现这个方法的浏览器有Firefox 3.5+、Safari 4+、IE和Safari 4+。

  setDragImge(element, x, y):指定一幅图像,当拖动发生的时候,显示在光标下方。这个方法接收的参数有三个分别是:要显示的HTML元素和光标在图像中的x、y坐标。其中,HTML元素可以是一幅图像,也可以是其他元素。是图像的话就显示图像,是其他元素的话就显示渲染后的元素。支持的浏览器有:Safari 4+、Chrome和Firefox 3.5+。

  Types:当前保存的数据类型。这个是一个类似数组的集合,以”text”这样的字符串形式保存着数据类型。支持的浏览器有:Chrome、Firefox 3.5+和IE 10+。

  了解过了一些理论知识,接下来一个小例子让大家更加加深理解。

  dragable属性及其他成员小例子

  HTML代码

[html] view plaincopyprint?

<ul>  
    <li draggable="true">a</li>  
    <li draggable="true">b</li>  
    <li draggable="false">c</li>  
</ul>  
<a href="http://www.baidu.com/">d</a>  
<p id="p1"></p>

  CSS代码

[css] view plaincopyprint?

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}  
#p1{ width:100px; height:100px; background:red; margin:300px;}

  JavaScript代码

[javascript] view plaincopyprint?

//dataTransfer对象 : 连接拖拽细节的 ,在event对象下面的  
//拖动不带链接的li,会起作用但不跳转链接  
//拖动带连接的a,会起作用也跳转  
  
window.onload = function(){  
    var aLi = document.getElementsByTagName('li');  
    var aA = document.getElementsByTagName('a');  
    var op = document.getElementById('p1');  
      
    for(var i=0;i<aLi.length;i++){  
      
        aLi[i].ondragstart = function(ev){ //拖拽前触发  
          
            this.style.background = 'yellow';  
              
            ev.dataTransfer.setData('a','hello');  //存储一个键值对 : value值必须是字符串  
              
            ev.dataTransfer.effectAllowed = 'all';  
              
            ev.dataTransfer.setDragImage(this,0,0);  
          
        };  
          
        aLi[i].ondragend = function(){  //拖拽结束触发  
          
            this.style.background = '';  
          
        };  
    }  
    for(var i=0;i<aA.length;i++){  
      
        aA[i].ondragstart = function(ev){ //拖拽前触发  
          
            this.style.background = 'yellow';  
              
            ev.dataTransfer.setData('a','hello');  //存储一个键值对 : value值必须是字符串  
              
            ev.dataTransfer.effectAllowed = 'link';  
              
          
        };  
          
        aA[i].ondragend = function(){  //拖拽结束触发  
          
            this.style.background = '';  
          
        };  
    }  
      
    op.ondragenter = function(){  //相当于onmouseover  
          
        this.style.background = 'green';  
          
    };  
      
    op.ondragleave = function(){  //相当于onmouseout  
          
        this.style.background = 'red';  
          
    };  
      
    op.ondragover = function(ev){ //进入目标、离开目标之间,连续触发  
          
        ev.preventDefault();  //阻止默认事件:元素就可以释放了  
          
        ev.dataTransfer.dropEffect = 'link';  //真对外部文件  
          
    };  
      
    op.ondrop = function(ev){  //释放鼠标的时候触发  
      
        this.style.background = 'red';    
      
        alert( ev.dataTransfer.getData('a') );  
        alert( ev.dataTransfer.types );  
      
    };  
      
};

  桌面拖拽到页面中的小例子

  HTML代码

[javascript] view plaincopyprint?

//dataTransfer对象 : 连接拖拽细节的 ,在event对象下面的  
  
window.onload = function(){  
  
    var op = document.getElementById('p1');  
      
      
      
      
    op.ondragenter = function(){  //相当于onmouseover  
          
        this.style.background = 'green';  
          
    };  
      
    op.ondragleave = function(){  //相当于onmouseout  
          
        this.style.background = 'red';  
          
    };  
      
    op.ondragover = function(ev){ //进入目标、离开目标之间,连续触发  
          
        ev.preventDefault();  //阻止默认事件:元素就可以释放了  
          
        ev.dataTransfer.dropEffect = 'link';  //真对外部文件  
          
    };  
      
    op.ondrop = function(ev){  //释放鼠标的时候触发  
      
        ev.preventDefault();  //阻止默认行为  
      
        this.style.background = 'red';    
          
        var oFR = new FileReader();  
      
        var list = ev.dataTransfer.files;  //当前拖拽的那个文件(返回的一个文件列表)  
          
        //alert(list.length);  
          
        //type : 文件类型  
          
        //alert(list[0].type);  
          
          
        oFR.onload = function(){ //读取完成,触发事件  
              
            alert(this.result);  // 读取到的信息  
              
        };  
          
        oFR.readAsDataURL(list[0]);  
      
    };  
      
};

  CSS代码

[css] view plaincopyprint?

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}  
#p1{ width:100px; height:100px; background:red; margin:300px;}

  JavaScript代码

[html] view plaincopyprint?

<p id="p1">梦龙小站</p>

  垃圾箱删除小例子

  HTML代码

[html] view plaincopyprint?

<ul>  
    <li draggable="true">a</li>  
    <li draggable="true">b</li>  
    <li draggable="true">c</li>  
</ul>  
<p id="p1">垃圾箱</p>

  CSS代码

[css] view plaincopyprint?

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}  
#p1{ width:100px; height:100px; background:red; margin:300px; color:white;}

  JavaScript代码

  1. [javascript] view plaincopyprint?
    
    //dataTransfer对象 : 连接拖拽细节的 ,在event对象下面的  
      
    window.onload = function(){  
        var aLi = document.getElementsByTagName('li');  
        var op = document.getElementById('p1');  
        var iNow = 0;  
          
        var targetLi = null;  
          
        for(var i=0;i<aLi.length;i++){  
          
            aLi[i].ondragstart = function(ev){ //拖拽前触发  
              
                this.style.background = 'yellow';  
                  
                ev.dataTransfer.setData('text',this.innerHTML);  //存储一个键值对 : value值必须是字符串  
                  
                targetLi = this;  
              
            };  
              
            aLi[i].ondragend = function(){  //拖拽结束触发  
              
                this.style.background = '';  
              
            };  
        }  
          
        op.ondragenter = function(){  //相当于onmouseover  
              
            this.style.background = 'green';  
              
        };  
          
        op.ondragleave = function(){  //相当于onmouseout  
              
            this.style.background = 'red';  
              
        };  
          
        op.ondragover = function(ev){ //进入目标、离开目标之间,连续触发  
              
            ev.preventDefault();  //阻止默认事件:元素就可以释放了  
              
              
        };  
          
        op.ondrop = function(ev){  //释放鼠标的时候触发  
          
            this.style.background = 'red';    
          
            var oText = ev.dataTransfer.getData('text');  
          
            if(targetLi){  
                targetLi.parentNode.removeChild(targetLi);  
                this.innerHTML = '删除的是:'+oText;  
            }  
          
        };  
          
    };

以上就是HTML5讲解之可拖动dragable属性和其他成员的详细内容,更多请关注其它相关文章!

相关标签: dragable HTML5 h5