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:
USA Companies

Top Software Development Companies in USA

Navigating the tech landscape to find the right partner is crucial yet challenging. This article offers a comparative glimpse into the top software development companies

Software Development

Top Software Development Companies

Looking for the best in software development? Our list of Top Software Development Companies is your gateway to finding the right tech partner. Dive in

India Web Development

Top Web Development Companies in India

In the digital race, the right web development partner is your winning edge. Dive into our curated list of top web development companies in India,

USA Web Development

Top Web Development Companies in USA

Looking for the best web development companies in the USA? We’ve got you covered! Check out our top 10 picks to find the right partner

Clean Energy Adoption

Inside Michigan’s Clean Energy Revolution

Democratic state legislators in Michigan continue to discuss and debate clean energy legislation in the hopes of establishing a comprehensive clean energy strategy for the

Chips Act Revolution

European Chips Act: What is it?

In response to the intensifying worldwide technology competition, Europe has unveiled the long-awaited European Chips Act. This daring legislative proposal aims to fortify Europe’s semiconductor

USA Companies

Top Software Development Companies in USA

Navigating the tech landscape to find the right partner is crucial yet challenging. This article offers a comparative glimpse into the top software development companies in the USA. Through a

Software Development

Top Software Development Companies

Looking for the best in software development? Our list of Top Software Development Companies is your gateway to finding the right tech partner. Dive in and explore the leaders in

India Web Development

Top Web Development Companies in India

In the digital race, the right web development partner is your winning edge. Dive into our curated list of top web development companies in India, and kickstart your journey to

USA Web Development

Top Web Development Companies in USA

Looking for the best web development companies in the USA? We’ve got you covered! Check out our top 10 picks to find the right partner for your online project. Your

Clean Energy Adoption

Inside Michigan’s Clean Energy Revolution

Democratic state legislators in Michigan continue to discuss and debate clean energy legislation in the hopes of establishing a comprehensive clean energy strategy for the state. A Senate committee meeting

Chips Act Revolution

European Chips Act: What is it?

In response to the intensifying worldwide technology competition, Europe has unveiled the long-awaited European Chips Act. This daring legislative proposal aims to fortify Europe’s semiconductor supply chain and enhance its

Revolutionized Low-Code

You Should Use Low-Code Platforms for Apps

As the demand for rapid software development increases, low-code platforms have emerged as a popular choice among developers for their ability to build applications with minimal coding. These platforms not

Cybersecurity Strategy

Five Powerful Strategies to Bolster Your Cybersecurity

In today’s increasingly digital landscape, businesses of all sizes must prioritize cyber security measures to defend against potential dangers. Cyber security professionals suggest five simple technological strategies to help companies

Global Layoffs

Tech Layoffs Are Getting Worse Globally

Since the start of 2023, the global technology sector has experienced a significant rise in layoffs, with over 236,000 workers being let go by 1,019 tech firms, as per data

Huawei Electric Dazzle

Huawei Dazzles with Electric Vehicles and Wireless Earbuds

During a prominent unveiling event, Huawei, the Chinese telecommunications powerhouse, kept quiet about its enigmatic new 5G phone and alleged cutting-edge chip development. Instead, Huawei astounded the audience by presenting

Cybersecurity Banking Revolution

Digital Banking Needs Cybersecurity

The banking, financial, and insurance (BFSI) sectors are pioneers in digital transformation, using web applications and application programming interfaces (APIs) to provide seamless services to customers around the world. Rising

FinTech Leadership

Terry Clune’s Fintech Empire

Over the past 30 years, Terry Clune has built a remarkable business empire, with CluneTech at the helm. The CEO and Founder has successfully created eight fintech firms, attracting renowned

The Role Of AI Within A Web Design Agency?

In the digital age, the role of Artificial Intelligence (AI) in web design is rapidly evolving, transitioning from a futuristic concept to practical tools used in design, coding, content writing

Generative AI Revolution

Is Generative AI the Next Internet?

The increasing demand for Generative AI models has led to a surge in its adoption across diverse sectors, with healthcare, automotive, and financial services being among the top beneficiaries. These

Microsoft Laptop

The New Surface Laptop Studio 2 Is Nuts

The Surface Laptop Studio 2 is a dynamic and robust all-in-one laptop designed for creators and professionals alike. It features a 14.4″ touchscreen and a cutting-edge design that is over

5G Innovations

GPU-Accelerated 5G in Japan

NTT DOCOMO, a global telecommunications giant, is set to break new ground in the industry as it prepares to launch a GPU-accelerated 5G network in Japan. This innovative approach will

AI Ethics

AI Journalism: Balancing Integrity and Innovation

An op-ed, produced using Microsoft’s Bing Chat AI software, recently appeared in the St. Louis Post-Dispatch, discussing the potential concerns surrounding the employment of artificial intelligence (AI) in journalism. These

Savings Extravaganza

Big Deal Days Extravaganza

The highly awaited Big Deal Days event for October 2023 is nearly here, scheduled for the 10th and 11th. Similar to the previous year, this autumn sale has already created

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