Jump to content
MaxCheaters Official Group on Discord
Top.MaxCheaters.com is now OPEN – Lineage 2 Top Listing
L2JForge.live Interlude Premium Emulator

{Tutorial}HTML5 Drag and Drop.Step 27.

MrHotFire

By MrHotFire
in Coding Tutorials/Guides

 Share

Recommended Posts

MrHotFire Newbie

MrHotFire

Posted
Posted

Drag and Drop

 

Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.

 

In HTML5, drag and drop is part of the standard, and any element can be draggable.

Browser Support

 

Internet Explorer,Firefox,Opera,Google Chrome,Safari.

 

Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.

 

Note: Drag and drop does not work in Safari 5.1.2.

HTML5 Drag and Drop Example

 

The example below is a simple drag and drop example:

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>
</html>

 

It might seem complicated, but lets go through all the different parts of a drag and drop event.

 

Make an Element Draggable

First of all: To make an element draggable, set the draggable attribute to true:

<img draggable="true">

 

What to Drag - ondragstart and setData()

 

Then, specify what should happen when the element is dragged.

 

In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.

 

The dataTransfer.setData() method sets the data type and the value of the dragged data:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

 

In this case, the data type is "Text" and the value is the id of the draggable element ("drag1").

 

Where to Drop - ondragover

The ondragover event specifies where the dragged data can be dropped.

 

By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.

 

This is done by calling the event.preventDefault() method for the ondragover event:

event.preventDefault()

 

Do the Drop - ondrop

 

When the dragged data is dropped, a drop event occurs.

 

In the example above, the ondrop attribute calls a function, drop(event):

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

 

Code explained:

 

    Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop)

    Get the dragged data with the dataTransfer.getData("Text") method. This method will return any data that was set to the same type in the setData() method

    The dragged data is the id of the dragged element ("drag1")

    Append the dragged element into the drop element

 

 

Credits Olympus,Internet,ME.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing


  • Posts

    • ZhangX
      WTB no collision characters

      By ZhangX · Posted

      If the problem is that the target is lost, the action of aiming at another character, upon losing collision, does not allow aiming.   This one works as it should, allowing you to target characters
    • NeoPacket0041
      HQ Photoshop | Verify Accs KYC, AML | Antiban 100% | PSD Tem

      By NeoPacket0041 · Posted

      MICROTEXT AND WATERMARKS BREAK MOST RENDERINGS Microtext and watermarks aren’t just small decorative details. They are one of the most common reasons a document fails verification, even when it looks decent at first glance. The issue is that these elements are almost impossible to reproduce “by eye.” Microtext requires precise geometry and legibility at a very small size, while a watermark needs the correct density, transparency, and accurate placement relative to other security features. Any deviation becomes obvious during detailed inspection. ▪ What’s most often done wrong: - microtext is drawn too thick or blurry - the watermark is made either too visible or almost invisible - the positioning between microtext and watermark is ignored - the original printing technology isn’t taken into account when choosing density and shape - The stronger the document’s security features, the less room there is for approximation. What matters here isn’t visual similarity, but accurate reproduction of the original technical characteristics. If your document contains microtext and watermarks, this is always an area that requires extra attention. Write to us in DMs. We’ll review your case and point out exactly which details need the highest precision during rendering. › TG: @mustang_service_ms ( https:// t.me/ mustang_service_ms ) › Channel: Mustang Service ( https:// t.me/ +JPpJCETg-xM1NjNl ) #drawing #microtext #photoshop #editing #watermarks
    • VPSLab
      — VPSLAB — Fast & Private RDP/VPS | 100% Instant Setup

      By VPSLab · Posted

      Active & Taking orders!
    • Daupz
      [L2J] GoldRush Mid-Rate

      By Daupz · Posted

      GoldRush launches tomorrow! July 18 16:00 GMT+3 Europe / International Register your account in the website, connect wallet and be ready to dominate!
    • Celestine
      [L2OFF] L2Exalta Legacy

      By Celestine · Posted

      🏰 L2EXALTA LEGACY — Interlude x45 📅 Grand Opening: 31/07/2026 — 21:30 (GMT+3) 🌐 Website: https://l2exalta.org/ 💬 Discord: https://discord.gg/zNTCZD4AcT 📌 Wiki: https://l2exalta.org/en/wiki.html#progression   ⚙️ MAIN INFO Chronicle : Interlude Rates : x45 Adena : x50 Spoil : x1 Drop : x5 Safe Enchant : +3 Files : L2OFF   💰 ECONOMY EX Coin : dynamic market currency, mined from monsters, Raid Bosses and Grand Bosses value fluctuates over time Exalta Vouchers : premium currency used for store, donations and EX Coin exchange Exchange : convert EX Coin into Exalta Vouchers Investment options : choose safer or riskier market strategies with EX Coin   ⚔️ PROGRESSION & GEAR Exalta Armors : signature top-tier gear line Forge System : upgrade weapons, armor and jewels with risk/reward mechanics Raid Boss progression tied to materials and prestige   🤖 AUTOFARM Access : Auto Hunting button, bottom-right UI Duration : controlled via tickets or in-game currency Route Mode : record custom farm routes Support Mode : healer/support builds auto-follow, heal and assist party Smart targeting logic with class-specific behavior (mage/archer/melee/support) Captcha designed not to interrupt legitimate AutoFarm sessions   🧪 BUFFER Exalta Buffer NPC/interface Scheme Buffer : save multiple buff loadouts Class presets for mage, fighter, support, PvP   🛠️ SMART GADGETS / QOL Autoloot filter Drop value tracker Boss timer tools Farm stats tracker Auto-consume system In-game server assistant   🗺️ DUNGEON FINDER / PVE Party matching with roles (Tank / Healer / DPS) Ready-check before teleport Monastery of Silence custom PvE zone Party-based reward structure   🎟️ DAILY PROGRESS / EXALTA PASS Daily and weekly tasks (farm, PvP, boss, check-in) Premium Pass track with extra rewards Monastery Daily Quest Reward boards for claiming progress   🏠 HOUSING & EXPEDITIONS Player residences with service NPCs Exalta Spirit Expeditions to themed territories Rewards vary by territory Owner-only access   🏆 PVP / TOURNAMENT Scheduled Tournament system Ranking points from wins/participation Spectator Mode for watching live matches PvP Statues for top-ranked players Anti-feed protections   🛡️ CLAN CONTENT Clan Civil War battlefield event Clan Dungeon Raid content DPS Meter for contribution tracking Support Credit system Classic siege/clan politics preserved   🏪 AUCTION / SHOPS Auction House with seller fee Black Market Dealer (limited-time special offers) Custom shops and multisells Confirmation prompts on purchases/sales   💳 DONATIONS / VIP Donation rewards linked to Exalta Vouchers VIP tiers with comfort/cosmetic bonuses Premium store Gift/promo codes for events   🎥 STREAMER / COMMUNITY Streamer Panel with visible stream links Viewer rewards system Streamer Points for cosmetics/vouchers In-game voice chat (global/party/clan/alliance/command)   🔒 FAIR PLAY Strong Anti-Bot protection Reward protection tied to valid client state Captcha on suspicious activity Staff investigation tools No bots, packet tools or modified clients allowed   👑 GRANDBOSS SPAWNS Orfen : 1 day + 1h random Core : 1 day + 1h random Queen Ant : 1 day 6h + 1h random Zaken : 2 days 12h + 1h random Baium : 5 days + 1h random Antharas : 8 days + 1h random Valakas : 11 days + 1h random   🏅 OLYMPIAD Runs Thursday, Friday, Saturday Heroes change monthly Balanced and fair matchmaking

  • Topics

×
×
  • Create New...

Important Information

This community uses essential cookies to function properly. Non-essential cookies and third-party services are used only with your consent. Read our Privacy Policy and We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue..