html5设置图片无法拖动,html5规定元素是否可拖动的属性draggable

5268f80b9b1e01f982625ef6fac83ca1.png

实例

一个可拖动的段落:

这是一个可拖动的段落。

浏览器支持

IE

Firefox

Chrome

Safari

Opera

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性。

注释:Internet Explorer 8 以及更早的版本,不支持 draggable 属性。

定义和用法

draggable 属性规定元素是否可拖动。

提示:链接和图像默认是可拖动的。

提示:draggable 属性常用在拖放操作中。请在我们的拖放教程中学习更多内容。

HTML 4.01 与 HTML5 之间的差异

draggable 属性是 HTML5 中的新属性。

语法

属性值值描述

true规定元素的可拖动的。

false规定元素不可拖动。

auto使用浏览器的默认行为。

实例:

HTML5-draggable(拖放)

#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

/*

* 虽然已经设定了img元素可被拖动,但是浏览器默认地,无法将数据/元素放置到其他元素中。

* 如果有需要设置某些元素可接受被拖动元素,则要阻止它的默认行为,

* 这要通过设置该接收元素的ondragover 事件,调用event.preventDefault() 方法

*/

function allowDrop(ev) {

ev.preventDefault(); //阻止默认行为

//ev.target.id

//此处ev.target是接收元素,通过事件被绑定在哪个元素即可区分

}

/*

* 当该img元素被拖动时,会触发一个ondragstart 事件,该事件调用了一个方法drag(event)。

*/

function drag(ev) {

//ev.dataTransfer.setData() 方法设置被拖数据的数据类型(Text)和值(被拖元素id),

//该方法将被拖动元素的id存储到事件的dataTransfer对象内,ev.dataTransfer.getData()可将该元素取出。

//此处ev.target是被拖动元素

ev.dataTransfer.setData("Text", ev.target.id);

}

/*

* 当被拖元素移动到接收元素,

* 松开鼠标时(即被拖元素放置在接收元素内时)会出发ondrop事件

*/

function drop(ev) {

ev.preventDefault(); //阻止默认行为

var data = ev.dataTransfer.getData("Text"); //将被拖动元素id取出

ev.target.appendChild(document.getElementById(data)); //将被拖动元素添加到接收元素尾部

}

5175c9cfe32dead9ee49c1806aef45a2.gif

87a05b2adebdfe21c6a994e7ee003682.png

257b165e17218030c2e622aac9f7bdef.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值