Getting Started with Javascript Draggable and Droppable

7 Jun 202310 minutes to read

The external script dependencies of the Drag and Drop are,

jQuery 1.7.1 and later versions.

And the internal script dependencies of the Drag and Drop are:

File	Description / Usage
ej.core.min.js	Must be referred always before using all the JS controls.
ej.draggable.min.js	Main file for Drag and Drop

For getting started you can use the ‘ej.web.all.min.js’ file, which encapsulates all the ‘ej’ controls and frameworks in one single file.

For themes, you can use the ‘ej.web.all.min.css’ CDN link from the snippet given. To add the themes in your application, please refer this link.

Configure the sample

Create a new HTML file and add CDN links to the JavaScript and CSS dependencies to your project.

HTML

<!DOCTYPE html>

    <html>

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />

        <!-- style sheet for default theme(flat azure) -->

        <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css"
              rel="stylesheet" />

        <!--scripts-->

        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js"></script>

        <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>

    </head>

    <body>

        <!--Place div element to perform Drag and Drop-->

        <script>

            // Place your script code here to initialize DropDownList

        </script>

    </body>

    </html>

NOTE

In production, we highly recommend you to use our custom script generator to create custom script file with required controls and its dependencies only. Also to reduce the file size further please use GZip compression in your server.

Initialize Drag And Drop

You can make any Html elements to be draggable or droppable by using ejDraggable and ejDroppable.This section explains how to perform drag using drag event and drop using drop by using html elements

HTML

<div id="leftContainer">
        <!-- draggable element-->
        <div id="dragElement" class="drag">
            <span class="dragText">Drag</span>
        </div>
		
    </div>

    <div id="rightContainer">
        <!-- droppable target element-->
        <div id="dropContainer" class="drop">
            <span class="dropText">Drop Here</span>
        </div>
    </div>
    <style>
         #leftContainer {
            width: 100px;
            height: 100px;
            padding: 30px;
            float: left;
        }

        #rightContainer {
            width: 100px;
            height: 100px;
            padding: 30px;
            float: left;
        }

        .drag {
            width: 60px;
            height: 40px;
            float: left;
            font-size: 14px;
            line-height: 37px;
            color: white;
            text-align: center;
            z-index: 100002;
            background-color: #666;
        }

        .drop {
            width: 80px;
            height: 80px;
            float: left;
            position: relative;
            padding: 8px;
            background-color: #eee;
        }

        .dragText, .dropText {
            font-size: 12px;
            line-height: 40px;
            display: inline-block;
        }

        .dragText {
            color: white;
        }

        .dropText {
            margin: 12px;
        }

        body {
            font-family: -webkit-pictograph;
        }
    </style>

JAVASCRIPT

jQuery(function ($){
            $("#dragElement").ejDraggable({
                helper: function (event) {
                    return $(event.element); // Object of the Draggable element.
                },
                drag:function(event)
				{
                event.target.textContent="Dragging";
				}
            });

            $("#dropContainer").ejDroppable({
                // Drop event for change the container text while dropping element.
                drop: function (event, ui) {
                    event.dropTarget.text("Dropped..!");
                }
            });
         });

Output of the above code will be as shown below:

Before Dragging:

Getting_Started_Image1

During Drag:

Getting_Started_Image2

After Dragging:

Getting_Started_Image13

Helper

Helper will return the object of corresponding draggable element. You can drag the element by using helper event.

JAVASCRIPT

$("#draggable-item").ejDraggable({
	      helper:function (event) {
	           return $(event.element);
                   },
	      clone:true
	     });

Set Boundaries

You can restrict the movement of draggable element within a specified area using dragArea property.

The below code explains how to make the movement constrained to the container boundaries.

HTML

<div id="draggable-container">
    <div id="draggable-item">Drag</div>
    </div>
    <style>
     #draggable-container {
        margin: 10px auto;
        width: 200px;
        height: 200px;
        background: #eee;
        padding: 10px;
        border: 1px solid black;
      }

     #draggable-item {
        width: 30px;
        height: 20px;
        padding: 10px;
        border: 1px solid black;
        margin: 5px;
        background: #666;
        color: white;
        cursor:default;
      }
    </style>

JAVASCRIPT

$(function () {
	   $("#draggable-item").ejDraggable({
	   dragArea:"#draggable-container",
	   helper:function (event) {
	         return $(event.element);
            }
			});
    });

The drag element cannot be moved outside this boundary.

Getting_Started_Image