Adding Drag and Drop feature in the webpage by using JqueryUI

Steps:

1) Include Jquery library file in head section.


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

2) Include Jquery UI library file in head section.


<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

3) Create your html structure as what you want with unique class name or ID name.

HTML:


<div id="draggablearea">
<span>Drag Me</span>
</div>

4) Call the draggable function and pointing the div ID or class name by using below method.

Script:


function init() {
$('#draggablearea').draggable(
{
containment: "window"
}
);
}

That’s it. Cool 🙂

Note: Usually Drag and drop feature is not working in mobile view. For achieving this feature in mobile platform we have to use touch support Jquery script.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *