HTML5 explanation of draggable attributes and other members

[Introduction] Dragable attribute We have introduced several relevant knowledge about native drag and drop in HTML5 before. Today I will introduce to you some other small things in HTML5 drag and drop. Without further ado, let’s take a look together. By default, links, text, and images are draggable

Dragable properties

We have already I have introduced you to several articles about native drag and drop in HTML5. Today I will introduce to you some other small things in HTML5 drag and drop. Without further ado, let’s take a look together.

By default, links, text and images can be dragged, and you can drag them without writing code. If you want other element tags to be draggable, then only HTML5 can do it. HTML5 specifies the dragable attribute for all HTML elements, indicating whether the element can be dragged. The dragable attribute is automatically set to true in link and image tags, and the default value of the dragable attribute of other elements is false.

The browsers that support the dragable attribute are: Firefox 4+, Chrome, IE 10+ and Safari 5+. Opera 11.5 and earlier versions do not support the HTML5 drag-and-drop function. In addition, to enable Firefox to support draggable properties, you must add an ondragstart event handler and save some information in the dataTransfer object. In IE 9 and earlier, calling the dragDrop() method through the mousedown event handler made any element draggable. In Safari 4 and earlier versions, you must additionally set the CSS style -khtml-user-drag: for the corresponding element before the element can be dragged.

HTML5 Drag and drop other members

Previously introduced some properties of the dataTransfer object , but not completely. Some of the methods and properties below are those that may have been missed.

　addElement(element): Add an element for the drag operation. Adding this element only affects the data (that is, adding an object that serves as the drag source and responds to the callback) and will not affect the appearance of the page element during the drag operation. As of the time of writing this blog, only Firefox 3.5+ implements this method.

clearData(format): Clear data saved in a specific format. Browsers that implement this method include Firefox 3.5+, Safari 4+, IE and Safari 4+.

setDragImge(element, x, y): Specify an image to be displayed under the cursor when dragging occurs. This method receives three parameters: the HTML element to be displayed and the x and y coordinates of the cursor in the image. Among them, the HTML element can be an image or other elements. If it is an image, the image will be displayed. If it is another element, the rendered element will be displayed. Supported browsers are: Safari 4+, Chrome and Firefox 3.5+.

Types: The currently saved data type. This is an array-like collection that stores data types in the form of strings such as "text". Supported browsers are: Chrome, Firefox 3.5+ and IE 10+.

After understanding some theoretical knowledge, here is a small example to deepen your understanding.

Small examples of dragable attributes and other members

HTML Code

[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 code

[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 code

[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 = &#39;yellow&#39;;  
              
            ev.dataTransfer.setData(&#39;a&#39;,&#39;hello&#39;);  //存储一个键值对 : value值必须是字符串  
              
            ev.dataTransfer.effectAllowed = &#39;all&#39;;  
              
            ev.dataTransfer.setDragImage(this,0,0);  
          
        };  
          
        aLi[i].ondragend = function(){  //拖拽结束触发  
          
            this.style.background = &#39;&#39;;  
          
        };  
    }  
    for(var i=0;i<aA.length;i++){  
      
        aA[i].ondragstart = function(ev){ //拖拽前触发  
          
            this.style.background = &#39;yellow&#39;;  
              
            ev.dataTransfer.setData(&#39;a&#39;,&#39;hello&#39;);  //存储一个键值对 : value值必须是字符串  
              
            ev.dataTransfer.effectAllowed = &#39;link&#39;;  
              
          
        };  
          
        aA[i].ondragend = function(){  //拖拽结束触发  
          
            this.style.background = &#39;&#39;;  
          
        };  
    }  
      
    op.ondragenter = function(){  //相当于onmouseover  
          
        this.style.background = &#39;green&#39;;  
          
    };  
      
    op.ondragleave = function(){  //相当于onmouseout  
          
        this.style.background = &#39;red&#39;;  
          
    };  
      
    op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发  
          
        ev.preventDefault();  //阻止默认事件：元素就可以释放了  
          
        ev.dataTransfer.dropEffect = &#39;link&#39;;  //真对外部文件  
          
    };  
      
    op.ondrop = function(ev){  //释放鼠标的时候触发  
      
        this.style.background = &#39;red&#39;;    
      
        alert( ev.dataTransfer.getData(&#39;a&#39;) );  
        alert( ev.dataTransfer.types );  
      
    };  
      
};

A small example of dragging the desktop to the page

HTML code

[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 code

[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 code

[html] view plaincopyprint?

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

A small example of trash can deletion

HTML code

[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 code

[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 code

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 = &#39;yellow&#39;;  
                 
               ev.dataTransfer.setData(&#39;text&#39;,this.innerHTML);  //存储一个键值对 : value值必须是字符串  
                 
               targetLi = this;  
             
           };  
             
           aLi[i].ondragend = function(){  //拖拽结束触发  
             
               this.style.background = &#39;&#39;;  
             
           };  
       }  
         
       op.ondragenter = function(){  //相当于onmouseover  
             
           this.style.background = &#39;green&#39;;  
             
       };  
         
       op.ondragleave = function(){  //相当于onmouseout  
             
           this.style.background = &#39;red&#39;;  
             
       };  
         
       op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发  
             
           ev.preventDefault();  //阻止默认事件：元素就可以释放了  
             
             
       };  
         
       op.ondrop = function(ev){  //释放鼠标的时候触发  
         
           this.style.background = &#39;red&#39;;    
         
           var oText = ev.dataTransfer.getData(&#39;text&#39;);  
         
           if(targetLi){  
               targetLi.parentNode.removeChild(targetLi);  
               this.innerHTML = &#39;删除的是:&#39;+oText;  
           }  
         
       };  
         
   };

The above is the detailed content of HTML5 explanation of draggable attributes and other members. For more information, please follow other related articles on the PHP Chinese website!