HTML5-Erklärung zu ziehbaren Attributen und anderen Mitgliedern

[Einführung] Dragable-Attribut Wir haben bereits einige relevante Kenntnisse über natives Drag & Drop in HTML5 eingeführt. Heute werde ich Ihnen einige weitere kleine Dinge im HTML5-Drag-and-Drop vorstellen. Schauen wir uns das ohne weitere Umschweife gemeinsam an. Standardmäßig sind Links, Text und Bilder ziehbar

Ich habe Ihnen mehrere Artikel über natives Drag & Drop in HTML5 vorgestellt. Heute werde ich Ihnen einige weitere kleine Dinge im HTML5-Drag-and-Drop vorstellen. Schauen wir uns das ohne weitere Umschweife gemeinsam an.

Standardmäßig können Links, Text und Bilder gezogen werden, und Sie können sie ziehen, ohne Code schreiben zu müssen. Wenn Sie möchten, dass andere Element-Tags ziehbar sind, ist dies nur mit HTML5 möglich. HTML5 gibt das Dragable-Attribut für alle HTML-Elemente an und gibt an, ob das Element gezogen werden kann. Das Dragable-Attribut wird in Link- und Bild-Tags automatisch auf true gesetzt, und der Standardwert des Dragable-Attributs anderer Elemente ist False.

Browser, die das Dragable-Attribut unterstützen, sind: Firefox 4+, Chrome, IE 10+ und Safari 5+. Opera 11.5 und frühere Versionen unterstützen die HTML5-Drag-and-Drop-Funktion nicht. Damit Firefox außerdem ziehbare Eigenschaften unterstützen kann, müssen Sie einen ondragstart-Ereignishandler hinzufügen und einige Informationen im dataTransfer-Objekt speichern. In IE 9 und früheren Versionen wurde durch den Aufruf der Methode „dragDrop()“ über den Mousedown-Ereignishandler jedes Element ziehbar gemacht. In Safari 4 und früheren Versionen müssen Sie zusätzlich den CSS-Stil -khtml-user-drag: für das entsprechende Element festlegen, bevor das Element gezogen werden kann.

HTML5 Drag & Drop anderer Mitglieder

Zuvor wurden einige Eigenschaften des dataTransfer-Objekts eingeführt , aber nicht vollständig. Einige der folgenden Methoden und Eigenschaften wurden möglicherweise übersehen.

　addElement(element): Fügen Sie ein Element für den Ziehvorgang hinzu. Das Hinzufügen dieses Elements wirkt sich nur auf die Daten aus (d. h. das Hinzufügen eines Objekts, das als Ziehquelle dient und auf den Rückruf reagiert) und hat keinen Einfluss auf das Erscheinungsbild des Seitenelements während des Ziehvorgangs. Zum Zeitpunkt der Erstellung dieses Blogs implementiert nur Firefox 3.5+ diese Methode.

ClearData(format): Löscht Daten, die in einem bestimmten Format gespeichert sind. Zu den Browsern, die diese Methode implementieren, gehören Firefox 3.5+, Safari 4+, IE und Safari 4+.

setDragImge(element, x, y): Geben Sie ein Bild an, das beim Ziehen unter dem Cursor angezeigt werden soll. Diese Methode empfängt drei Parameter: das anzuzeigende HTML-Element und die x- und y-Koordinaten des Cursors im Bild. Unter diesen kann das HTML-Element ein Bild oder andere Elemente sein. Wenn es sich um ein Bild handelt, wird das Bild angezeigt. Wenn es sich um ein anderes Element handelt, wird das gerenderte Element angezeigt. Unterstützte Browser sind: Safari 4+, Chrome und Firefox 3.5+.

Typen: Der aktuell gespeicherte Datentyp. Dabei handelt es sich um eine Array-ähnliche Sammlung, die Datentypen in Form von Zeichenfolgen wie „Text“ speichert. Unterstützte Browser sind: Chrome, Firefox 3.5+ und IE 10+.

Nachdem ich nun einige theoretische Kenntnisse erworben habe, finden Sie hier ein kleines Beispiel, das Ihnen helfen soll, es tiefer zu verstehen. HTML-Code

CSS-Code

JavaScript-Code

Ein kleines Beispiel für das Ziehen des Desktops in die Seite

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

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

CSS-Code

JavaScript Code< HTML-Code

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

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

Das obige ist der detaillierte Inhalt vonHTML5-Erklärung zu ziehbaren Attributen und anderen Mitgliedern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!