html5中可拖动dragable属性及其他成员的讲解

发布时间：2020-04-22 11:08:02

来源：亿速云

阅读：350

作者：小新

这篇文章主要为大家详细介绍了html5中可拖动dragable属性及其他成员的讲解，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

可拖动dragable属性

之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了。今天为大家介绍HTML5拖拽中的其他一些小东东，闲话不多说赶快一起看看吧。

在默认情况下，链接、文本和图像是可以拖动的，不用再写代码即可拖动。如果想让其他元素标签也可以拖动，那么只有HTML5能实现了。HTML5为所有HTML元素规定了dragable属性，表示元素是否可以拖动。链接和图像的标签中自动将dragable属性自动被设置成true，其他元素的dragable属性的默认值是false。

支持dragable属性的浏览器有：Firefox 4+、Chrome、IE 10+和Safari 5+。Opera 11.5及之前的版本是不支持HTML5的拖放功能。另外能够让Firefox支持可拖动属性必须添加一个ondragstart事件处理程序，并在dataTransfer对象中保存一些信息才可以。在IE 9及更早版本中，通过mousedown事件处理程序调用dragDrop()方法能够让任何元素可以拖动。在Safari 4及更早的版本中，必须额外给相应的元素设置CSS样式 -khtml-user-drag: element才可以拖动。

HTML5拖拽其他成员

之前介绍过有关dataTransfer对象的一些属性，但是并不是很全。下面的一些方法和属性是其中有可能漏掉的属性和方法。

addElement(element)：为拖动操作添加一个元素。添加这个元素只影响数据(即增加作为拖动源而响应回调的对象)，不会影响拖动操作时页面元素的外观。直到写这篇博客的时候，只有Firefox 3.5+实现这种方法了。

clearData(format)：清除以特定格式保存的数据。实现这个方法的浏览器有Firefox 3.5+、Safari 4+、IE和Safari 4+。

setDragImge(element, x, y)：指定一幅图像，当拖动发生的时候，显示在光标下方。这个方法接收的参数有三个分别是：要显示的HTML元素和光标在图像中的x、y坐标。其中，HTML元素可以是一幅图像，也可以是其他元素。是图像的话就显示图像，是其他元素的话就显示渲染后的元素。支持的浏览器有：Safari 4+、Chrome和Firefox 3.5+。

Types：当前保存的数据类型。这个是一个类似数组的集合，以”text”这样的字符串形式保存着数据类型。支持的浏览器有：Chrome、Firefox 3.5+和IE 10+。

了解过了一些理论知识，接下来一个小例子让大家更加加深理解。

dragable属性及其他成员小例子

HTML代码

[html] view plaincopyprint?

• a
• b
• c

d

CSS代码[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代码[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[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[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 );

};

};

桌面拖拽到页面中的小例子

HTML代码

[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代码[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代码[html] view plaincopyprint?

梦龙小站

垃圾箱删除小例子

HTML代码[html] view plaincopyprint?

abc

垃圾箱

CSS代码

[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代码[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[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;

}

};

};

以上就是html5中可拖动dragable属性及其他成员的讲解的详细内容了，看完之后是否有所收获呢？如果想了解更多相关内容，欢迎来亿速云行业资讯。