可拖动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;
    iaLi.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;
    iaA.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;
       iaLi.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属性和其他成员的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！