Explication HTML5 des attributs déplaçables et des autres membres

[Introduction] Attribut dragable Nous avons déjà introduit plusieurs connaissances pertinentes sur le glisser-déposer natif en HTML5. Aujourd’hui, je vais vous présenter quelques autres petites choses du glisser-déposer HTML5. Sans plus tarder, jetons un coup d’œil ensemble. Par défaut, les liens, le texte et les images sont déplaçables

Je vous ai présenté plusieurs articles sur le glisser-déposer natif en HTML5. Aujourd’hui, je vais vous présenter quelques autres petites choses du glisser-déposer HTML5. Sans plus tarder, jetons un coup d’œil ensemble.

Par défaut, les liens, le texte et les images peuvent être glissés, et vous pouvez les faire glisser sans écrire de code. Si vous souhaitez que d'autres balises d'éléments puissent être déplacées, seul HTML5 peut le faire. HTML5 spécifie l'attribut dragable pour tous les éléments HTML, indiquant si l'élément peut être glissé. L'attribut dragable est automatiquement défini sur true dans les balises de lien et d'image, et la valeur par défaut de l'attribut dragable des autres éléments est false.

Les navigateurs qui prennent en charge l'attribut dragable sont : Firefox 4+, Chrome, IE 10+ et Safari 5+. Opera 11.5 et les versions antérieures ne prennent pas en charge la fonction glisser-déposer HTML5. De plus, pour permettre à Firefox de prendre en charge les propriétés déplaçables, vous devez ajouter un gestionnaire d'événements ondragstart et enregistrer certaines informations dans l'objet dataTransfer. Dans IE 9 et versions antérieures, l'appel de la méthode dragDrop() via le gestionnaire d'événements mousedown rendait n'importe quel élément déplaçable. Dans Safari 4 et les versions antérieures, vous devez en outre définir le style CSS -khtml-user-drag: pour l'élément correspondant avant de pouvoir faire glisser l'élément.

HTML5 Glisser et déposer d'autres membres

Certaines propriétés de l'objet dataTransfer ont déjà été introduites , mais pas complètement. Certaines des méthodes et propriétés ci-dessous sont celles qui ont peut-être été oubliées.

　addElement(element) : Ajoute un élément pour l'opération de glisser. L'ajout de cet élément affecte uniquement les données (c'est-à-dire l'ajout d'un objet qui sert de source de glissement et répond au rappel) et n'affectera pas l'apparence de l'élément de page pendant l'opération de glissement. Au moment de la rédaction de ce blog, seul Firefox 3.5+ implémente cette méthode.

ClearData(format) : Effacer les données enregistrées dans un format spécifique. Les navigateurs qui implémentent cette méthode incluent Firefox 3.5+, Safari 4+, IE et Safari 4+.

setDragImge(element, x, y) : Spécifiez une image à afficher sous le curseur lors du glissement. Cette méthode reçoit trois paramètres : l'élément HTML à afficher et les coordonnées x et y du curseur dans l'image. Parmi eux, l'élément HTML peut être une image ou d'autres éléments. S'il s'agit d'une image, l'image sera affichée. S'il s'agit d'un autre élément, l'élément rendu sera affiché. Les navigateurs pris en charge sont : Safari 4+, Chrome et Firefox 3.5+.

Types : le type de données actuellement enregistré. Il s'agit d'une collection de type tableau qui stocke les types de données sous forme de chaînes telles que « texte ». Les navigateurs pris en charge sont : Chrome, Firefox 3.5+ et IE 10+.

Maintenant que j'ai acquis quelques connaissances théoriques, voici un petit exemple pour vous aider à comprendre plus profondément. Code HTML

Code CSS

Code JavaScript

Un petit exemple de glisser le bureau dans la page

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

Code HTML

[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] 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 );  
      
    };  
      
};

Code CSS

JavaScript code

Code CSS

[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]);  
      
    };  
      
};

Code JavaScript

[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;}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!