HTML ondragend Event Attribute
Description
The event attribute ondragend
allows you to set the script to fire when the user has finished dragging the item (after the drag operation).
To make an item draggable, use the global attribute draggable. Links and images can be dragged by default (without using the global attribute draggable).
In HTML5, seven event attributes were added that are used at various stages of the drag and drop operation:
- Events that occur with the drag object:
- ondragstart (triggered at the beginning of an item drag operation).
- ondrag (triggered when an item is dragged).
- ondragend (triggered when the user has finished dragging and dropping the item).
- Events that occur with the object being dragged onto:
- ondragenter (when the item will be transferred to the specified zone (target for transfer)).
- ondragover (triggered when an element is moved over a valid transfer zone).
- ondragleave (triggered when an element leaves an acceptable zone for transfer).
- ondrop (triggered after the dragged item descends on the drag object).
Syntax
<element ondragend="script">
Values
- scriptThe name of the script to use when the event has been triggered.
Example
Consider an example in which the <p> element can be moved between two <div> blocks. To do this, we will set four event attributes on the <div> blocks and three on the moveable <p> paragraph.
When we start moving the <p> element, two events are triggered: the first is triggered at the beginning
of the operation of dragging the element with the mouse (ondragstart), on which we installed a script that
allows you to store data and its type (setData method), the second ondrag event fires at the moment the
drag started and informs us of this in the <p id="info"> </p>
element.
By default, items cannot be placed in other items. To make this accessible (canceling the default browser) we use the preventDefault() method, which is triggered when an element is moved over a valid zone for transfer (the ondragover event attribute)
ondragenter event occurs when the element is moved to the specified zone, and a script is triggered that sets the background color to yellow and the dashed border to black. When an element leaves a given zone, the border and background style values are returned to their original form (ondragleave event)
The example uses two more event attributes: the first is ondrop, which is triggered when an element
descends onto a drag object, a script is launched that allows you to receive data (getData method) and the
second attribute of events is ondragend, which is triggered when the user has finished dragging and
dropping the element and runs a script that informs us about the completion of the drag and drop procedure
in the <p id="info"> </p>
element.
<!DOCTYPE html>
<html>
<head>
<title>Attributes for mouse events. Drag and drop.</title>
<style>
.dragndrop {
width: 200px;
height: 50px;
border: 3px solid orange;
padding: 30px;
text-align: center;
background: cornsilk;
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p>Move the HTML <p> element between the two rectangles:</p>
<div class="dragndrop" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondrag="dragging(event)" ondragend="dragEnd(event)" draggable="true" id="anyid">Move me!</p>
</div>
<div class="dragndrop" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<p id="info"> </p>
<script>
function dragStart ( event ) {
event.dataTransfer.setData( "Text" , event.target.id);
}
function dragging ( event ) {
document.getElementById("info").innerHTML = "The <p> element is being dragged (ondrag)";
}
function allowDrop ( event ) {
event.preventDefault();
}
function dragEnter ( event ) {
if (event.target.className == "dragndrop") {
event.target.style.background = "yellow";
event.target.style.border = "3px dotted black";
}
}
function dragLeave ( event ) {
if (event.target.className == "dragndrop") {
event.target.style.background = "";
event.target.style.border = "";
}
}
function drop ( event ) {
var data = event.dataTransfer.getData ("Text");
event.target.appendChild(document.getElementById(data));
}
function dragEnd ( event ) {
document.getElementById("info").innerHTML="Draggable <p> element dropped onto the drag object (ondragend)";
}
</script>
</body>
</html>
Supported Tags
All HTML tags.
Browser Support
Desktop | |||||
9 | 12 | 1 | 9 | 12 | 3.1 |
Tablets / Mobile | |||||
![]() |
|||||
1 | 18 | 9 | 12 | 2 | 1.0 |
Share this Page
If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.
Sidebar
CSS & HTML References
- CSS At-Rules
- CSS Data Types
- CSS Functions
- attr
- blur
- brightness
- calc
- circle
- contrast
- drop-shadow
- ellipse
- grayscale
- hsl
- hsla
- hue-rotate
- inset
- invert
- linear-gradient
- matrix
- matrix3d
- opacity
- perspective
- polygon
- radial-gradient
- repeating-linear-gradient
- repeating-radial-gradient
- rgb
- rgba
- rotate
- rotate3d
- rotateX
- rotateY
- rotateZ
- saturate
- scale
- scale3d
- scaleX
- scaleY
- scaleZ
- sepia
- skew
- skewX
- skewY
- translate
- translate3d
- translateX
- translateY
- translateZ
- CSS Properties
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- caret-color
- clear
- clip-path
- color
- column-count
- column-fill
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- counter-set
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-weight
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphens
- image-orientation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- line-break
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- object-position
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-wrap
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- perspective
- perspective-origin
- place-content
- place-items
- place-self
- position
- quotes
- resize
- right
- shape-image-threshold
- shape-margin
- shape-outside
- tab-size
- table-layout
- text-align
- text-align-last
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- CSS Pseudo Classes
- :active
- :checked
- :default
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited
- CSS Pseudo Elements
- HTML Tags
- a
- abbr
- address
- area
- article
- aside
- audio
- b
- base
- bdi
- bdo
- blockquote
- body
- br
- button
- canvas
- caption
- cite
- code
- col
- colgroup
- comment
- datalist
- dd
- del
- details
- dfn
- dialog
- div
- dl
- doctype
- dt
- em
- embed
- fieldset
- figcaption
- figure
- footer
- form
- h1
- h2
- h3
- h4
- h5
- h6
- head
- header
- hr
- html
- i
- iframe
- img
- input
- ins
- kbd
- keygen
- label
- legend
- li
- link
- map
- mark
- menu
- meta
- meter
- nav
- noscript
- object
- ol
- optgroup
- option
- output
- p
- param
- picture
- pre
- progress
- q
- rp
- rt
- ruby
- s
- samp
- script
- section
- select
- small
- source
- span
- strong
- style
- sub
- summary
- sup
- table
- tbody
- td
- textarea
- tfoot
- th
- thead
- time
- title
- tr
- track
- u
- ul
- var
- video
- wbr
Convert your website into an app for Android and iOS. Updates automatically. Unicode Characters & Emojis
Search all Unicode characters and emojis plus other tools. Learn Wordpress
Wordpress hosting. Theme and plugin reviews. Wordpress development tips. Templatic
Wordpress Themes, Cloud Hosting, Backups and Webmaster Tips. A2 Web Hosting
Shared hosting, Reseller hosting, Cloud hosting, Dedicated hosting. Online Password Manager
Access your passwords from any computer, no need to remember all of your passwords. Advertise Here
Advertise your company and products here!