ondragover

Description
Syntax
Examples
Links

Description

The ondragover attribute for HTML handles a drag over on an element.

Syntax

ondragover="value"

<!doctype html>
<html>
<head>
    <style>
        .myclass1
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
            width: 100px;
        }
        .myclass2
        {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="myclass1" ondragenter="myfunction1(event)" ondragleave="myfunction2(event)" ondragover="myfunction3(event)" ondrop="myfunction4(event)">
        <div class="myclass2" draggable="true" ondrag="myfunction5(event)" ondragend="myfunction6(event)" ondragstart="myfunction7(event)">dragdrop1</div>
    </div>
    <div class="myclass1" ondragenter="myfunction1(event)" ondragleave="myfunction2(event)" ondragover="myfunction3(event)" ondrop="myfunction4(event)">
        <div class="myclass2" draggable="true" ondrag="myfunction5(event)" ondragend="myfunction6(event)" ondragstart="myfunction7(event)">dragdrop2</div>
    </div>
    <div class="myclass1" ondragenter="myfunction1(event)" ondragleave="myfunction2(event)" ondragover="myfunction3(event)" ondrop="myfunction4(event)">
        <div class="myclass2" draggable="true" ondrag="myfunction5(event)" ondragend="myfunction6(event)" ondragstart="myfunction7(event)">dragdrop3</div>
    </div>
    <script>
        let mydragdrop = null;
        function myfunction1(myparameter)
        {
        }
        function myfunction2(myparameter)
        {
        }
        function myfunction3(myparameter)
        {
            myparameter.preventDefault();

2 · JS · on

<!doctype html>
<html>
<head>
    <style>
        .myclass1
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
            width: 100px;
        }
        .myclass2
        {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="myclass1">
        <div class="myclass2">dragdrop1</div>
    </div>
    <div class="myclass1">
        <div class="myclass2">dragdrop2</div>
    </div>
    <div class="myclass1">
        <div class="myclass2">dragdrop3</div>
    </div>
    <script>
        let mydragdrop = null;
        function myfunction1(myparameter)
        {
        }
        function myfunction2(myparameter)
        {
        }
        function myfunction3(myparameter)
        {
            myparameter.preventDefault();

3 · JS · addEventListener

<!doctype html>
<html>
<head>
    <style>
        .myclass1
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
            width: 100px;
        }
        .myclass2
        {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="myclass1">
        <div class="myclass2">dragdrop1</div>
    </div>
    <div class="myclass1">
        <div class="myclass2">dragdrop2</div>
    </div>
    <div class="myclass1">
        <div class="myclass2">dragdrop3</div>
    </div>
    <script>
        let mydragdrop = null;
        function myfunction1(myparameter)
        {
        }
        function myfunction2(myparameter)
        {
        }
        function myfunction3(myparameter)
        {
            myparameter.preventDefault();

Overview

Search

Download

العربية

česky

Dansk

Deutsch

English

Español

Suomi

Français

Magyar

Bahasa Indonesia

Italiano

日本語

Malagasy

te reo Māori

한국어

Nederlands

Norsk

Polski

Português

Română

Pyccкий

Shqip

Svenska

Wikang Tagalog

українська

Tiếng Việt

简体中文

繁體中文

Overview

Attributes

Elements

Other

Overview

Functions

Properties

Pseudo-Classes

Pseudo-Elements

Units

Overview

AbortController

AbstractRange

AbortSignal

ChildNode

Comment

console

CustomEvent

Declarations

Document

DocumentFragment

DocumentOrShadowRoot

DOMImplementation

DOMStringList

DOMTokenList

Element

Event

EventTarget

HTMLAllCollection

HTMLBaseElement

HTMLCollection

HTMLDialogElement

HTMLElement

HTMLFormControlsCollection

HTMLLinkElement

HTMLOptionsCollection

HTMLOrSVGElement

HTMLVideoElement

Iterations

Location

MutationObserver

MutationRecord

Node

NodeList

NonDocumentTypeChildNode

NonElementParentNode

ParentNode

Prompts

RadioNodeList