{"id":1031,"date":"2019-07-19T12:32:07","date_gmt":"2019-07-19T12:32:07","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=1031"},"modified":"2019-08-29T06:23:15","modified_gmt":"2019-08-29T06:23:15","slug":"jquery-draggable-and-droppable","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/","title":{"rendered":"Jquery Draggable and Droppable"},"content":{"rendered":"<p><strong>1. Add bootstrap, <a href=\"https:\/\/www.studysection.com\/jquery-foundation\" style=\"color:blue\">jquery<\/a>, and jquery UI(Important) or angularjs (optional if you are using angularjs) script in your app.<\/strong><br \/>\n\t<\/br><\/p>\n<pre> &lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz\/K68vbdEjh4u\" crossorigin=\"anonymous\"&gt;\r\n\t\t\r\n    &lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\" integrity=\"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\r\n\r\n\t&lt;script src=\"https:\/\/code.jquery.com\/jquery-1.12.4.js\"&gt;&lt;\/script&gt;\r\n\r\n\t&lt;link rel=\"stylesheet\" href=\"\/\/code.jquery.com\/ui\/1.12.1\/themes\/base\/jquery-ui.css\"&gt;\r\n\t\r\n\t&lt;script src=\"https:\/\/code.jquery.com\/ui\/1.12.1\/jquery-ui.js\"&gt;&lt;\/script&gt;\r\n\t\r\n    &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p><strong>2. Make two div&#8217;s where you want to your div draggable and droppable.<\/strong><\/p>\n<pre>\t &lt;!-- drag and drop start --&gt;\r\n     &lt;div class=\"row col-md-width connectedSortable custom-ht add-space\" id=\"sortable1\"&gt;\r\n        &lt;div class=\"col-md-3 sqnc-box col-sm-4 box\" ng-repeat=\"chooseDoctors in\r\n            chooseDoctor\"&gt;\r\n            &lt;div class=\"gray-box text-center\" id=\"{{chooseDoctors.room_id}}\"&gt;\r\n                &lt;h3&gt;{{chooseDoctors.room_name}}&lt;\/h3&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"row squence-top\"&gt;\r\n        &lt;span&gt;Please drag and drop rooms here&lt;\/span&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;!-- drag and drop end here --&gt;\r\n    &lt;div id=\"sortable2\" class=\"row col-md-width custom-ht add-space\r\n        connectedSortable\"&gt;\r\n        &lt;div ng-show=\"error_msg\"&gt;\r\n        &lt;\/div&gt;\r\n\r\n        &lt;div ng-show=\"!error_msg\" class=\"col-md-3 sqnc-box col-sm-4 box\" ng-repeat=\"rooms in\r\n            room\"&gt;\r\n            &lt;div class=\"gray-box text-center\" id=\"{{rooms.id}}\"&gt;\r\n                &lt;h3&gt;{{rooms.name}}&lt;\/h3&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt; <\/pre>\n<p><strong>3. Assign two different id&#8217;s on different div&#8217;s where you want to draggable and droppable.Like id-&gt;sortable1 assigned to first div where drag and drop starts and id-&gt;sortable2 is assigned to second div where drag and drop ends.<\/strong><br \/>\n<strong>4. Add one class which connects both div&#8217;s like class-&gt;connectedSortable is added in the above code.<\/strong><br \/>\n<strong>5. Add script<\/strong><\/p>\n<pre>\t&lt;script&gt;\r\n    var app = angular.module('myApp', []);\r\n    app.controller('myCtrl', function($scope) {\r\n\t\t$scope.chooseDoctor = [\r\n\t\t\t{\"room_id\":\"1\", \"room_name\":\"Room 1\"}, \r\n\r\n\r\n\t\t\t{\"room_id\":\"2\", \"room_name\":\"Room 2\"},\r\n\t\t\t{\"room_id\":\"3\", \"room_name\":\"Room 3\"}, \r\n\t\t\t{\"room_id\":\"4\", \"room_name\":\"Room 4\"}, \r\n\t\t\t{\"room_id\":\"5\", \"room_name\":\"Room 5\"}, \r\n\t\t\t{\"room_id\":\"6\", \"room_name\":\"Room 6\"}, \r\n\t\t\t{\"room_id\":\"7\", \"room_name\":\"Room 7\"}, \r\n\t\t\t{\"room_id\":\"8\", \"room_name\":\"Room 8\"}, \r\n\t\t\t{\"room_id\":\"9\", \"room_name\":\"Room 9\"}, \r\n\t\t\t{\"room_id\":\"10\", \"room_name\":\"Room 10\"},  \r\n\t\t]\r\n\r\n\t\t$scope.room = [\r\n\t\t\t{\"id\":\"1\", \"name\":\"Room 11\"}, \r\n\t\t\t{\"id\":\"2\", \"name\":\"Room 12\"},\r\n\t\t\t{\"id\":\"3\", \"name\":\"Room 13\"}, \r\n\t\t\t{\"id\":\"4\", \"name\":\"Room 14\"}, \r\n\t\t\t{\"id\":\"5\", \"name\":\"Room 15\"}, \r\n\t\t\t{\"id\":\"6\", \"name\":\"Room 16\"}, \r\n\t\t\t{\"id\":\"7\", \"name\":\"Room 17\"}, \r\n\t\t\t{\"id\":\"8\", \"name\":\"Room 18\"}, \r\n\t\t\t{\"id\":\"9\", \"name\":\"Room 19\"}, \r\n\t\t\t{\"id\":\"10\", \"name\":\"Room 20\"},  \r\n\t\t]\r\n\r\n\t\t$(function () {\r\n            $(\"#sortable1, #sortable2\").sortable({\r\n                connectWith: \".connectedSortable\"\r\n            }).disableSelection();\r\n        });\r\n\r\n        var positions;\r\n\r\n\t\t$(\"#sortable1\").sortable({\r\n\r\n\t\tupdate: function (event, ui) {\r\n\t\t\t$scope.room_ids = [];\r\n\t\t\t$('#sortable1 .gray-box').each(function (e) {\r\n\t\t\t\tif (jQuery.inArray($(this).prop('id'), $scope.room_ids) == '-1') {\r\n\t\t\t\t\t$scope.room_ids.push($(this).prop('id'));\r\n\t\t\t\t}\r\n\r\n\t\t\t});\r\n\r\n\t\t\tpositions = $scope.room_ids.join(',');\r\n\t\t\tconsole.log($scope.room_ids);\r\n\t\t},\r\n\t  \r\n\t});\r\n\r\n\t&lt;\/script&gt; <\/pre>\n<p><strong>6. Output is:-<\/strong><br \/>\n<\/br><br \/>\n<img decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2019\/07\/jquery1.png\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Add bootstrap, jquery, and jquery UI(Important) or angularjs (optional if you are using angularjs) script in your app. &lt;link<\/p>\n","protected":false},"author":1,"featured_media":1033,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[177,175,178,176,170],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>StudySection Blog - Jquery Draggable and Droppable<\/title>\n<meta name=\"description\" content=\"jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"StudySection Blog - Jquery Draggable and Droppable\" \/>\n<meta property=\"og:description\" content=\"jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-19T12:32:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-29T06:23:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2019\/07\/jquery-drag-drop-blog.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"160\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Jquery Draggable and Droppable\",\"datePublished\":\"2019-07-19T12:32:07+00:00\",\"dateModified\":\"2019-08-29T06:23:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/\"},\"wordCount\":97,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"drag\",\"draggable\",\"drop\",\"droppable\",\"Jquery\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/\",\"url\":\"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/\",\"name\":\"StudySection Blog - Jquery Draggable and Droppable\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2019-07-19T12:32:07+00:00\",\"dateModified\":\"2019-08-29T06:23:15+00:00\",\"description\":\"jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Jquery Draggable and Droppable\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"StudySection Blog - Jquery Draggable and Droppable","description":"jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.","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:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/","og_locale":"en_US","og_type":"article","og_title":"StudySection Blog - Jquery Draggable and Droppable","og_description":"jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.","og_url":"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2019-07-19T12:32:07+00:00","article_modified_time":"2019-08-29T06:23:15+00:00","og_image":[{"width":300,"height":160,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2019\/07\/jquery-drag-drop-blog.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Jquery Draggable and Droppable","datePublished":"2019-07-19T12:32:07+00:00","dateModified":"2019-08-29T06:23:15+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/"},"wordCount":97,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["drag","draggable","drop","droppable","Jquery"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/","url":"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/","name":"StudySection Blog - Jquery Draggable and Droppable","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2019-07-19T12:32:07+00:00","dateModified":"2019-08-29T06:23:15+00:00","description":"jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/jquery-draggable-and-droppable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Jquery Draggable and Droppable"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":613,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/1031"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=1031"}],"version-history":[{"count":11,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/1031\/revisions"}],"predecessor-version":[{"id":1107,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/1031\/revisions\/1107"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/1033"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=1031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=1031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=1031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}