jQuery UI’s draggable and droppable: Implement Drag & Drop for Box Areas

When developing web applications, it’s essential to provide users with an interactive experience. One effective way to do this is by offering an interface that allows operations like drag and drop. In this article, I will explain how to implement drag and drop functionality using jQuery UI’s draggable and droppable, in a simple way for beginners. This is especially useful for those looking to replicate actions like the “Appearance” → “Widgets” section in the WordPress admin panel.

Using this technique, you can easily create an interface where users can drag elements freely and drop them in designated areas. Drag and drop operations are particularly useful in dashboards, admin panels, and customization screens where users can freely position elements. By reading this article, you can also integrate this feature into your project.

What is jQuery UI’s draggable and droppable?

jQuery UI is a toolkit that extends the jQuery library, allowing you to easily implement various interactive UI components. Among them, draggable (draggable) and droppable (droppable) are especially useful features.

• draggable: This feature allows an element to be dragged with the mouse. This lets users click on a specific element on the screen and move it to any location.
• droppable: This feature allows elements moved by draggable to be dropped into a specified area. When an element is dropped in the drop area, specific actions can be performed.

By combining these features, you can build a UI that users can intuitively interact with. For example, you can allow users to freely arrange dashboard widgets or visually add items to a shopping cart.

CSS for Drag & Drop of Box Areas using jQuery UI’s draggable and droppable

First, let’s prepare the CSS code to style the drag and drop area. Use the following style to design the box area.

Load the jquery-ui.css file. Below is the CSS for the drag and drop areas (#draggable1, #draggable2, #droppable).

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.8em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
#wrapper{
	float: left;
}
#draggable1, #draggable2{
	width:100px;
	height:100px;
	float:none;
	margin:20px;
	padding:20px;
	font-size:12px;
	line-height:1.4em;
}
#droppable{
	width:300px;
	height:300px;
	float:left;
	margin:20px;
	padding:20px;
	font-size:16px;
}
-->
</style>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />

The above CSS code keeps the overall style of the page simple while making the drag and drop areas easy to distinguish. In particular, #draggable1 and #draggable2 are set as draggable boxes, and #droppable is set as the drop area, making it visually easy to differentiate between the elements to be dragged and the drop area.

JavaScript for Drag & Drop of Box Areas using jQuery UI’s draggable and droppable

Next, let’s look at the JavaScript code to implement the drag and drop functionality. Use the following script to set up the draggable and droppable areas.

Load the jquery.min.js and jquery-ui.min.js files. Use $(drag area).draggable({options}) and $(drop area).droppable({options}) to set the drag and drop areas.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {

	$('#draggable1').draggable({
		cursor: 'move',
		revert: 'invalid'
	});

	$('#droppable').droppable({
		activeClass: 'ui-state-hover',
		hoverClass: 'ui-state-active',
		drop: function(event, ui) {
			$(this).addClass('ui-state-highlight').find('p').text('Drop completed.');
		}
	});

});
</script>

In this JavaScript code, we first load the jQuery and jQuery UI libraries, then set the #draggable1 element to be draggable. Additionally, the #droppable area is set as a drop area, and when a dragged element is dropped, a specific class is added, and the text is changed.

This simple code allows you to implement interactive operations quickly and easily.

HTML for Drag & Drop of Box Areas

Finally, we will write the HTML code to actually make the drag and drop functionality work. Below is the code for the drag and drop areas (id=”draggable1″, id=”droppable”).
Use the following code to set up the draggable elements and drop area.

<div id="idWrap">
    <h1>You can drag the small box into the large box.<br />If you cancel the drop, it will return to its original position.</h1>
        
    <div class="clDemoArea">
    
      <div id="wrapper">
        <div id="draggable1" class="ui-widget-content">
            <p>Please drag this box.</p>
        </div><!--/draggable1-->
      </div><!--/wrapper-->

      <div id="droppable" class="ui-widget-header">
          <p>Please drop it here.</p>
      </div><!--/droppable-->

    </div><!--/clDemoArea-->
    
</div><!--/idWrap-->

In this HTML code, we first wrap everything with idWrap, and within that, we place the draggable box and the drop area. #draggable1 and #droppable correspond to the draggable area and the drop area, respectively. Users can open this page and try the drag-and-drop operation.

Demo Page for Drag & Drop of Boxes Using jQuery UI’s draggable and droppable

For those who want to try this feature, I’ve prepared a demo page. By checking the demo in action, you can better understand how it’s implemented.

Demo page for Drag & Drop of Boxes Using jQuery UI’s draggable and droppable
On this demo page, you can experience the drag-and-drop operation. This will be very helpful for those looking to create an interface like a control panel or the theme editing screen in EC-CUBE.

Conclusion

In this article, we explained how to implement drag-and-drop functionality using jQuery UI’s draggable and droppable. By using this feature, you can easily create an interface that allows users to interact intuitively. Try incorporating this into your website or application to enhance the user experience.

Also, drag-and-drop operations are very effective when providing users with a customizable interface, allowing them to manipulate the screen according to their needs. Even beginners can implement it easily, so give it a try!

*Please note that if you reuse this code, it is at your own risk. Do not reuse the Google Analytics tags from the demo page’s head tag.