HTML5 Drag and Drop Tutorial

HTML5 Drag and Drop Tutorial

Drag and drop functionality is usually implemented using a JavaScript or jQuery plugin. That is generally a good solution. However, when extensive customization is needed, native HTML5 drag and drop is a better choice. Native HTML5 drag and drop is also faster and more responsive solution. Read this tutorial to find out how to implement the native drag and drop functionality in just a few minutes.

Draggable Content

First, we need to create the HTML markup for draggable content:

  • Column content 1
  • Column content 2
  • Column content 3

This is a simple unordered list with 3 items. Not all HTML elements are draggable by default, but that can be changed with the following CSS code:

 [draggable] {  -moz-user-select: none;  -khtml-user-select: none;  -webkit-user-select: none;  user-select: none;  /* Required to make elements draggable in old WebKit */  -khtml-user-drag: element;  -webkit-user-drag: element;}. list_column {  cursor: move; }

At this point, the list items can be dragged, but cannot change positions. To create that, we will need to implement the event listeners.

Event Listeners

There are six events that we need to implement in order to have the native drag and drop functionality:

  • dragstart
  • dragenter
  • dragleave
  • dragover
  • drop
  • dragend

So, let’s start the drag with dragstart event:

// This variable will hold the dragged item objectvar dragSrcEl = null;$('.list').on('dragstart','.list_column', function(e) {		e.stopPropagation();		// Add the CSS class to the element that is being dragged	// This allows to style that element	$(this).addClass('dragging');		dragSrcEl = this;	// Set data transfer object values	e.originalEvent.dataTransfer.effectAllowed = 'move';	e.originalEvent.dataTransfer.setData('text/html', $(this).html());	});

The dragged element can be dropped on any other list item (let’s call it the drop zone). Dragenter defines what happens when the dragged element enters the zone where it can be dropped:

$('.list').on('dragenter','.list_column ', function(e) {	  	  // Add the CSS class to the drop zone  // That way we can indicate the drop location to the user	  $('.list_column').removeClass('over');	  $(this). addClass('over');});

When the element leaves the drop zone, the dragleave event is fired:

$('.list').on('dragleave','.list_column', function(e) {	// Element is not a drop zone anymore – remove the CSS class$(this).removeClass('over');});

The dragover event is triggered while the dragged element is in the drop zone:

$('.list').on('dragover','.list_column', function(e) {	// Prevent the default browser behavior	if (e.preventDefault) {		    		e.preventDefault();  	}	e.originalEvent.dataTransfer.dropEffect = 'move';	return false;	});

When the dragging has stopped, we need to clean up the assigned CSS classes used for styling the element being dragged and the drop zones:

$('.list').on('dragend','.list_column', function(e) {	// Remove over and dragging CSS classes  	$(this).removeClass('dragging');	$('.list_column').removeClass('over');});

The event that contains most of the HTML5 drag and drop logic is the drop event, which is fired after the user drops the element (releases the mouse button):

$('.list').on('drop','.list_column', function(e) {	// Remove over and dragging CSS classes  	$(this).removeClass('dragging');	$('.list_column').removeClass('over');	// Stops the browser from redirecting	if (e.stopPropagation) {    		e.stopPropagation();	}  	// Do the drop only if the dragged item and the drop zone are not the same elements	if (dragSrcEl != this) {    		// Set the dragged element HTML to the HTML of the item we have dropped on.		$(dragSrcEl).html($(this).html());		$(this).html(e.originalEvent.dataTransfer.getData('text/html'));    	}	return false;	});

Basically, when the dragged element is dropped on another list item, their HTML code switches positions using the DataTransferobject. This action also makes them switch positions visually and is also convenient to connect it with PHP and save the item order in the database.

Conclusion

This is just a basic implementation of the native HTML5 drag and drop. It can be customized in many ways, such as saving the item position, removing the items from the list, using a fixed number of positions, using two item lists.

devx-admin

devx-admin

Share the Post:
Remote Learning

Revolutionizing Remote Learning for Success

School districts are preparing to reveal a substantial technological upgrade designed to significantly improve remote learning experiences for both educators and students amid the ongoing

Revolutionary SABERS Transforming

SABERS Batteries Transforming Industries

Scientists John Connell and Yi Lin from NASA’s Solid-state Architecture Batteries for Enhanced Rechargeability and Safety (SABERS) project are working on experimental solid-state battery packs

Build a Website

How Much Does It Cost to Build a Website?

Are you wondering how much it costs to build a website? The approximated cost is based on several factors, including which add-ons and platforms you

Cisco Splunk Deal

Cisco Splunk Deal Sparks Tech Acquisition Frenzy

Cisco’s recent massive purchase of Splunk, an AI-powered cybersecurity firm, for $28 billion signals a potential boost in tech deals after a year of subdued mergers and acquisitions in the

Iran Drone Expansion

Iran’s Jet-Propelled Drone Reshapes Power Balance

Iran has recently unveiled a jet-propelled variant of its Shahed series drone, marking a significant advancement in the nation’s drone technology. The new drone is poised to reshape the regional

Solar Geoengineering

Did the Overshoot Commission Shoot Down Geoengineering?

The Overshoot Commission has recently released a comprehensive report that discusses the controversial topic of Solar Geoengineering, also known as Solar Radiation Modification (SRM). The Commission’s primary objective is to

Remote Learning

Revolutionizing Remote Learning for Success

School districts are preparing to reveal a substantial technological upgrade designed to significantly improve remote learning experiences for both educators and students amid the ongoing pandemic. This major investment, which

Revolutionary SABERS Transforming

SABERS Batteries Transforming Industries

Scientists John Connell and Yi Lin from NASA’s Solid-state Architecture Batteries for Enhanced Rechargeability and Safety (SABERS) project are working on experimental solid-state battery packs that could dramatically change the

Build a Website

How Much Does It Cost to Build a Website?

Are you wondering how much it costs to build a website? The approximated cost is based on several factors, including which add-ons and platforms you choose. For example, a self-hosted

Battery Investments

Battery Startups Attract Billion-Dollar Investments

In recent times, battery startups have experienced a significant boost in investments, with three businesses obtaining over $1 billion in funding within the last month. French company Verkor amassed $2.1

Copilot Revolution

Microsoft Copilot: A Suit of AI Features

Microsoft’s latest offering, Microsoft Copilot, aims to revolutionize the way we interact with technology. By integrating various AI capabilities, this all-in-one tool provides users with an improved experience that not

AI Girlfriend Craze

AI Girlfriend Craze Threatens Relationships

The surge in virtual AI girlfriends’ popularity is playing a role in the escalating issue of loneliness among young males, and this could have serious repercussions for America’s future. A

AIOps Innovations

Senser is Changing AIOps

Senser, an AIOps platform based in Tel Aviv, has introduced its groundbreaking AI-powered observability solution to support developers and operations teams in promptly pinpointing the root causes of service disruptions

Bebop Charging Stations

Check Out The New Bebob Battery Charging Stations

Bebob has introduced new 4- and 8-channel battery charging stations primarily aimed at rental companies, providing a convenient solution for clients with a large quantity of batteries. These wall-mountable and

Malyasian Networks

Malaysia’s Dual 5G Network Growth

On Wednesday, Malaysia’s Prime Minister Anwar Ibrahim announced the country’s plan to implement a dual 5G network strategy. This move is designed to achieve a more equitable incorporation of both

Advanced Drones Race

Pentagon’s Bold Race for Advanced Drones

The Pentagon has recently unveiled its ambitious strategy to acquire thousands of sophisticated drones within the next two years. This decision comes in response to Russia’s rapid utilization of airborne

Important Updates

You Need to See the New Microsoft Updates

Microsoft has recently announced a series of new features and updates across their applications, including Outlook, Microsoft Teams, and SharePoint. These new developments are centered around improving user experience, streamlining

Price Wars

Inside Hyundai and Kia’s Price Wars

South Korean automakers Hyundai and Kia are cutting the prices on a number of their electric vehicles (EVs) in response to growing price competition within the South Korean market. Many

Solar Frenzy Surprises

Solar Subsidy in Germany Causes Frenzy

In a shocking turn of events, the German national KfW bank was forced to discontinue its home solar power subsidy program for charging electric vehicles (EVs) after just one day,

Electric Spare

Electric Cars Ditch Spare Tires for Efficiency

Ira Newlander from West Los Angeles is thinking about trading in his old Ford Explorer for a contemporary hybrid or electric vehicle. However, he has observed that the majority of

Solar Geoengineering Impacts

Unraveling Solar Geoengineering’s Hidden Impacts

As we continue to face the repercussions of climate change, scientists and experts seek innovative ways to mitigate its impacts. Solar geoengineering (SG), a technique involving the distribution of aerosols

Razer Discount

Unbelievable Razer Blade 17 Discount

On September 24, 2023, it was reported that Razer, a popular brand in the premium gaming laptop industry, is offering an exceptional deal on their Razer Blade 17 model. Typically

Innovation Ignition

New Fintech Innovation Ignites Change

The fintech sector continues to attract substantial interest, as demonstrated by a dedicated fintech stage at a recent event featuring panel discussions and informal conversations with industry professionals. The gathering,

Import Easing

Easing Import Rules for Big Tech

India has chosen to ease its proposed restrictions on imports of laptops, tablets, and other IT hardware, allowing manufacturers like Apple Inc., HP Inc., and Dell Technologies Inc. more time

Semiconductor Stock Plummet

Dramatic Downturn in Semiconductor Stocks Looms

Recent events show that the S&P Semiconductors Select Industry Index seems to be experiencing a downturn, which could result in a decline in semiconductor stocks. Known as a key indicator

Anthropic Investment

Amazon’s Bold Anthropic Investment

On Monday, Amazon announced its plan to invest up to $4 billion in the AI firm Anthropic, acquiring a minority stake in the process. This decision demonstrates Amazon’s commitment to

AI Experts Get Hired

Tech Industry Rehiring Wave: AI Experts Wanted

A few months ago, Big Tech companies were downsizing their workforce, but currently, many are considering rehiring some of these employees, especially in popular fields such as artificial intelligence. The