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 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 for the corresponding element -khtml-user-drag: element can be dragged.
## Small examples of dragable attributes and other members
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>
CSS codeli{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px;}
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 );
};
};
## Drag the desktop to the page Small example in
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]);
};
};
li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px;}
<p id="p1">梦龙小站</p>
HTML code
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<p id="p1">垃圾箱</p>
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;}
//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;
}
};
};
#