Home > Developer > Web Develop
HTML5 draggable Properties:
This property specifies whether the element can be dragged.
Links and images are draggable by default.
Syntax structure:
<draggable= "True|false|auto">
Browser support:
(1). IE8 above browsers support this property.
(2). This property is supported by Google Chrome.
(3). Firefox supports this property.
(4). This property is supported by the Safari browser.
(5). This property is supported by the Opera browser.
Differences between HTML4.01 and HTML5:
The Draggable property is HTML5 new.
Property value:
| Value | Describe |
| True | Specifies that the element is draggable. |
| False | The specified element is non-draggable. |
| Auto | Use the browser's default attributes. |
code example:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title><styletype= "Text/css">#antzone{width:350px;Height:70px;padding:10px;Border:1px solid #ccc;}</style><Scripttype= "Text/javascript">functionAllowDrop (EV) {Ev.preventdefault ();} functiondrag (EV) {Ev.dataTransfer.setData ("Text", ev.target.id);} functionDrop (EV) {varData=Ev.dataTransfer.getData ("Text"); Ev.target.appendChild (document.getElementById (data)); Ev.preventdefault ();} Window.onload=function(){ varOdiv=document.getElementById ("Antzone"); varop=document.getElementById ("Drag"); Odiv.ondrop=function(EV) {drop (EV); } odiv.ondragover=function(EV) {allowDrop (EV)} Op.ondragstart=function(EV) {drag (EV)}}</Script></Head><Body><DivID= "Antzone"></Div><PID= "Drag"draggable= "true">You can drag the paragraph into the rectangle above</P></Body></HTML>
The original address is: http://www.51texiao.cn/HTML5jiaocheng/2015/0618/4618.html
The most original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=10036
HTML5 draggable Properties
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
