{"id":6735,"date":"2015-09-08T12:15:04","date_gmt":"2015-09-08T09:15:04","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=6735"},"modified":"2017-12-21T16:40:04","modified_gmt":"2017-12-21T14:40:04","slug":"jquery-drag-drop-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/","title":{"rendered":"jQuery Drag and Drop Example"},"content":{"rendered":"

The aim of this example is to explain and use drag and drop functionality with jQuery. Basically, in jQuery you can enable draggable functionality on any DOM element and move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport. Dragging and dropping can be a very intuitive way for users to interact with your site or web app. People often use drag-and-drop for things like:<\/p>\n

\u2022 Moving email messages into folders
\n\u2022 Reordering lists of items
\n\u2022 Moving objects in games around, such as cards and puzzle pieces
\n 
\n 
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

1. Basic Setup & Application<\/h2>\n

To begin, create and new HTML document and add the following basic syntax inside:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n\t<title>jQuery Drag & Drop Example<\/title>\r\n\r\n    <!-- LINKS SECTION  -->\r\n    <link rel=\"stylesheet\" href=\"jquery-ui.css\">\r\n    <script src=\"jquery-1.11.3.min.js\"><\/script>\r\n    <script src=\"jquery-ui.js\"><\/script>\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION -->\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION  -->\r\n\r\n<!-- JAVASCRIPT SECTION  -->\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Don’t worry about the link files, you’ll find them attached in your final source download at the end of the article.<\/p>\n
Now let’s see a basic drag and drop example. First, create a new element in the HTML section and give it a class name.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div class=\"dragme\">Drag me!<\/div>\r\n<\/pre>\n
Next, to make it more clear, give this element some styling:<\/p>\n
\r\n<!-- STYLE SECTION -->\r\n<style type=\"text\/css\">\r\n.dragme {\r\n        border-radius: 0.5em;\r\n        width: 12em;\r\n        height: 8em;\r\n        padding: 1em;\r\n        font-family: \"Montserrat\", \"Arial\";\r\n        background-color: #00C5CD;\r\n        color: white;\r\n    }\r\n<\/style>\r\n<\/pre>\n
Next, in your Javascript section, create a new function which finds the .dragme<\/code> class and applies the .draggable()<\/code> method to this class:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $('.dragme').draggable();\r\n  });\r\n<\/script>\r\n<\/pre>\n
The result would be a draggable element like this:
\n
\"Basic<\/a>
Basic Draggable Functionality<\/figcaption><\/figure><\/p>\n
2. Customized Draggable Elements<\/h2>\n
In this section, we’ll have a look at how much we can customize draggable elements to fit our needs.<\/p>\n
2.1 Constraining Movement<\/h3>\n
Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the axis option to limit the draggable’s path to the x- or y-axis, or use the containment option to specify a parent DOM element or a jQuery selector, like ‘document.’ Let’s first use the containment<\/code> to limit the area to a parent div:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div class=\"drag-parent\">\r\n    <div class=\"dragme\">Drag me!<\/div>\r\n<\/div>\r\n<\/pre>\n
Let’s give the parent div a little styling:<\/p>\n
\r\n<!-- STYLE SECTION -->\r\n<style type=\"text\/css\">\r\n.drag-parent {\r\n    border: 0.1em solid #BA064E;\r\n    width: 45em;\r\n    height: 20em;\r\n}\r\n<\/style>\r\n<\/pre>\n
And now, let’s add the containment<\/code> option to the draggable()<\/code> method:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $('.dragme').draggable({ containment: \".drag-parent\" });\r\n  });\r\n<\/script>\r\n<\/pre>\n
This would result in a limited draggable area:
\n
\"Constraining<\/a>
Constraining Draggable Area using Containment<\/figcaption><\/figure><\/p>\n
Now let’s constrain draggable area by axis, x or y. To do this, add the axis<\/code> option to the .draggable()<\/code> method and give it a value of 'x'<\/code> or 'y'<\/code> depending on what you are looking for.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n    <div class=\"dragme dragme-x\">Drag me by x!<\/div>\r\n    <div class=\"dragme dragme-y\">Drag me by y!<\/div>\r\n<\/pre>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $('.dragme-x').draggable({ axis: \"x\" });\r\n    $('.dragme-y').draggable({ axis: \"y\" });\r\n  });\r\n<\/script>\r\n<\/pre>\n
\"Constrain<\/a>
Constrain Movement by Axis<\/figcaption><\/figure>\n
2.2 Cursor Styles over Draggable Element<\/h3>\n
Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the cursorAt<\/code> option to specify another location relative to the draggable (specify a pixel value from the top<\/code>, right<\/code>, bottom<\/code>, and\/or left<\/code>). Customize the cursor’s appearance by supplying the cursor option with a valid CSS cursor value: default, move, pointer, crosshair, etc.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n    <div class=\"dragme dragme-x dragme-crosshair\">Drag me by x!<\/div>\r\n    <div class=\"dragme dragme-y dragme-move\">Drag me by y!<\/div>\r\n<\/pre>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n$(function() {\r\n$('.dragme-crosshair').draggable({ cursor: \"crosshair\", cursorAt: { top: 80, left: 120 } });\r\n$('.dragme-move').draggable({ cursor: \"move\", cursorAt: { top: 90, left: 100 } });\r\n});\r\n<\/script>\r\n<\/pre>\n
The result would be a customized cursor while dragging our element:
\n
\"Cursor<\/a>
Cursor Styling on Draggable Elements<\/figcaption><\/figure><\/p>\n
2.3 Revert Draggable Element Position<\/h3>\n
You can actually return the draggable (or it’s helper) to its original location when dragging stops with the boolean revert<\/code> option.<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $( '.dragme' ).draggable({ revert: true });\r\n  });\r\n<\/script>\r\n<\/pre>\n
\"Revert<\/a>
Revert Position<\/figcaption><\/figure>\n
Another useful option here would be helper<\/code> with the value clone<\/code>. That would create a clone of the element while dragging and still show the original element right in its inital position:<\/p>\n
\r\n  $(function() {\r\n    $( '.dragme' ).draggable({ revert: true, helper: \"clone\" });\r\n  });\r\n<\/pre>\n
\"Revert<\/a>
Revert Position, Draggable Element is Cloned<\/figcaption><\/figure>\n
2.4 Snap to Element or Grid<\/h3>\n
Snap the draggable to the inner or outer boundaries of a DOM element. Use the snap or snapMode (inner, outer, both).
\nOr snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div class=\"drag-parent\">\r\n    <div class=\"dragme dragme-normal\">I snap to all other draggable elements!<\/div>\r\n    <div class=\"dragme dragme-x dragme-crosshair dragme-parent\">Drag me to my parent!<\/div>\r\n    <div class=\"dragme dragme-y dragme-move dragme-grid\">Drag me to my grid!<\/div>\r\n<\/div>\r\n<\/pre>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $('.dragme-normal').draggable({ snap: true });\r\n    $('.dragme-parent').draggable({ snap: '.drag-parent' });\r\n    $('.dragme-grid').draggable({ grid: [ 50, 50 ] });\r\n  });\r\n<\/script>\r\n<\/pre>\n
\"Perform<\/a>
Perform Snap to Element or Grid Functionality<\/figcaption><\/figure>\n
3. An Advanced Approach<\/h2>\n
In a more professional and complete demo that you can find here<\/a>, you can make this ultimate by adding or removing congtent (classes) on mouseover and mouseleave to complete the whole user experience for the modern web. The demo includes your source code for this:
\n
\"Telerik's<\/a>
Telerik’s Kendo UI Pro Demo of Drag and Drop<\/figcaption><\/figure><\/p>\n
4. Conclusion<\/h2>\n
Drag-and-drop with JavaScript used to be very hard to do \u2014 in fact, getting a decent cross-browser version working was next to impossible. However, with modern browsers and a smattering of jQuery, drag-and-drop is now a piece of cake! Dragging has a lot to customize and improve to make your UX perfect. Try out and see how you can get creative and productive!<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: jQuery Drag & Drop<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this example is to explain and use drag and drop functionality with jQuery. Basically, in jQuery you can enable draggable functionality on any DOM element and move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport. Dragging and dropping can be a very intuitive …<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-6735","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"\njQuery Drag and Drop Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to explain and use drag and drop functionality with jQuery. Basically, in jQuery you can enable draggable functionality on any\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Drag and Drop Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to explain and use drag and drop functionality with jQuery. Basically, in jQuery you can enable draggable functionality on any\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-08T09:15:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T14:40:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery Drag and Drop Example\",\"datePublished\":\"2015-09-08T09:15:04+00:00\",\"dateModified\":\"2017-12-21T14:40:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/\"},\"wordCount\":762,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/\",\"name\":\"jQuery Drag and Drop Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-09-08T09:15:04+00:00\",\"dateModified\":\"2017-12-21T14:40:04+00:00\",\"description\":\"The aim of this example is to explain and use drag and drop functionality with jQuery. Basically, in jQuery you can enable draggable functionality on any\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery Drag and Drop Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Drag and Drop Example - Web Code Geeks - 2026","description":"The aim of this example is to explain and use drag and drop functionality with jQuery. Basically, in jQuery you can enable draggable functionality on any","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Drag and Drop Example - Web Code Geeks - 2026","og_description":"The aim of this example is to explain and use drag and drop functionality with jQuery. Basically, in jQuery you can enable draggable functionality on any","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-09-08T09:15:04+00:00","article_modified_time":"2017-12-21T14:40:04+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery Drag and Drop Example","datePublished":"2015-09-08T09:15:04+00:00","dateModified":"2017-12-21T14:40:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/"},"wordCount":762,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/","name":"jQuery Drag and Drop Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-09-08T09:15:04+00:00","dateModified":"2017-12-21T14:40:04+00:00","description":"The aim of this example is to explain and use drag and drop functionality with jQuery. Basically, in jQuery you can enable draggable functionality on any","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-drag-drop-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery Drag and Drop Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=6735"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6735\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=6735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=6735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=6735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}