Ziehbares Attribut
Wir haben eingeführt Ich habe bereits mehrere relevante Kenntnisse über natives Drag & Drop in HTML5 erworben. 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 für das entsprechende Element -khtml-user-drag festlegen:
Element kann gezogen werden.
HTML5 zieht andere Mitglieder
Einige Eigenschaften des dataTransfer-Objekts habe ich bereits vorgestellt, sie sind jedoch nicht umfassend. 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.
Kleine Beispiele für ziehbare Attribute und andere Mitglieder
HTML-Code
<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>
Nach dem Login kopieren
CSS-Code
li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px;}Nach dem Login kopieren
Nach dem Login kopieren
JavaScript-Code
//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 );
};
};Nach dem Login kopieren
Ein kleines Beispiel für das Ziehen des Desktops in die Seite
HTML-Code
//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]);
};
};Nach dem Login kopieren
CSS-Code
li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px;}Nach dem Login kopieren
Nach dem Login kopieren
JavaScript-Code
<p id="p1">梦龙小站</p>
Nach dem Login kopieren
Kleines Beispiel zum Löschen des Papierkorbs
HTML-Code
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<p id="p1">垃圾箱</p>
Nach dem Login kopieren
CSS-Code
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;}Nach dem Login kopieren
JavaScript-Code
//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;
}
};
};Nach dem Login kopieren
Hier wird der tatsächliche HTML5-Kampf und die Analyse des nativen Widerstands (vier ziehbare Attribute und andere Mitglieder) vorgestellt, und mehr. Für weitere verwandte Inhalte, Bitte beachten Sie die chinesische PHP-Website (www.php.cn)!
