JavaScript

How to move elements between two div tag areas using drag-and-drop [No JavaScript plugins used]

 

This article introduces a simple method to drag and drop elements between two div tag areas without using JavaScript plugins. By combining HTML, CSS, and JavaScript, you can create an interface where users can freely move elements. We will explain from the basics step by step.

Contents
  1. What is Drag and Drop?
  2. CSS Styling
  3. HTML Structure for Drag and Drop UI
  4. JavaScript for Drag and Drop Functionality
  5. [dataTransfer] Demo Page for Moving Elements Between Two Div Tag Areas Using Drag and Drop
  6. Conclusion

What is Drag and Drop?

Drag and drop is a feature where an element can be grabbed with the mouse and moved to another location. It is frequently used in web applications and helps implement intuitive user interfaces. For instance, it is used in file uploads, moving events in a calendar, organizing cards in task management apps, and many other scenarios.

In the sample of this article, we will create a UI where text elements can be freely dragged and dropped between div areas.

CSS Styling

Let’s first look at the CSS code to style the elements. You can adjust this CSS as needed to customize the appearance.

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:26px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  line-height: 1.2em;
}

#wrap{
  width: 524px;
  margin: 0 auto;
}
#dpsmpla,
#dpsmplb {
    float: left;
    width: 240px;
    height:200px;
    padding: 10px;
    border:dotted 1px #000000;
}
#dpsmpla {
    background-color: #DBDBEA;
}
#dpsmplb {
    background-color: #ffffff;
}
#dgsmpla,
#dgsmplb,
#dgsmplc {
    width: 200px;
    margin: 18px auto;
    padding: 6px;
    text-align: center;
    font-weight: bold;
}
#dgsmpla {
    background-color: #0040FF;
}
#dgsmplb {
    background-color: #FFFF00;
}
#dgsmplc {
    background-color: #FF2626;
}
</style>

This CSS sets the style for the drag source area, drop destination area, and individual text elements. You can customize colors and layouts to suit user design needs.

HTML Structure for Drag and Drop UI

The HTML structure defines the div areas that users interact with, placing text elements in each area.

<h1>You can move the sample tag elements (a, b, c) in the gray area on the left to the white area on the right via drag and drop</h1>
<br>

<div id="wrap">
<div id="dpsmpla" ondrop="smpldrop( event, this );" ondragover="allowdrop( event );">
    <p id="dgsmpla" draggable="true" ondragstart="smpldrag( event );">Sample a</p>
    <p id="dgsmplb" draggable="true" ondragstart="smpldrag( event );">Sample b</p>
    <p id="dgsmplc" draggable="true" ondragstart="smpldrag( event );">Sample c</p>
</div>
<div id="dpsmplb" ondrop="smpldrop( event, this );" ondragover="allowdrop( event );"></div>
</div>

This HTML code provides a UI where text elements can be freely moved between two div areas. Each text element has the draggable=”true” attribute, enabling drag operations.

JavaScript for Drag and Drop Functionality

Next, here is the JavaScript code to implement drag-and-drop functionality. Use the script below to control the drag and drop of elements.

<script type="text/javascript">
function smpldrag( $event ) {
    $event.dataTransfer.setData( "Text", $event.target.id );
}
function smpldrop( $event, $this ) {
    $event.preventDefault();
    var $data = $event.dataTransfer.getData( "Text" );
    $this.appendChild( document.getElementById( $data ) );
}
function allowdrop( $event ) {
    $event.preventDefault();
}
</script>

This JavaScript uses the dataTransfer object to temporarily store information about the dragged element and move it to the drop destination. The allowdrop function enables the drop operation.

[dataTransfer] Demo Page for Moving Elements Between Two Div Tag Areas Using Drag and Drop

Access the demo page via the link below to see the functionality in action. Test various elements to drag and drop and assess the interface usability.

[dataTransfer] Demo for Moving Elements Between Two Div Tag Areas Using Drag and Drop

Conclusion

In this article, we introduced a simple method to implement drag-and-drop functionality without using JavaScript plugins. This allows creating an interface where elements can be freely moved between two div tag areas. By applying this technique, more advanced UIs can also be realized.

  • Applications: Task management tools, file organization systems, interactive learning apps, etc.
  • Key Point: While the code is simple, it is an effective feature for enhancing UI.

Try applying this sample to your projects!

*Please note: Use at your own discretion.
Do not reuse the Google Analytics tag from the demo page’s head section.

drag-and-drop
RELATED POST