{"id":3921,"date":"2019-03-29T09:39:59","date_gmt":"2019-03-29T04:09:59","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=3921"},"modified":"2019-03-29T09:40:15","modified_gmt":"2019-03-29T04:10:15","slug":"jquery-draggable-droppable","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/jquery-draggable-droppable\/","title":{"rendered":"JQuery draggable\/droppable"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">JQuery draggable\/droppable<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Date : 27\/03\/2019<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article I will describe the Drag&amp;Drop feature from jQuery. In this post we will create the example drag and drop html page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step for creating the drag and drop html page.<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li> Include jquery and css file inside head.<\/li><\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel='stylesheet' href='http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.11.2\/themes\/smoothness\/jquery-ui.css'>\n&lt;link rel='stylesheet' href='https:\/\/code.jquery.com\/ui\/1.10.4\/themes\/ui-lightness\/jquery-ui.css'>\n&lt;source src='http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js'>&lt;\/source>\n&lt;source src='http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.11.2\/jquery-ui.min.js'>&lt;\/source><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">2. You can add the following css and javascript code inside head tag.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CSS:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#draggables {\n  background-color: white;\n  padding: 20px;\n  border: 1px solid #000;\n  border-radius: 15px;\n  width: 12%;\n  height: 300px;\n}\n\n#trashCan {\n  float: right;\n}\n\n.good {\n  border: 1px solid green;\n}\n\n.bad {\n    border: 1px solid red;\n}\n\n.rotate {\n  transition-duration: .5s;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n  -webkit-transform: rotate(360deg);\n          transform: rotate(360deg);\n  \n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Javascript:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(function () {\n$(\".good\").draggable();\n$(\".bad\").draggable({\nrevert:\"invalid\"\n});\n$(\"#trashCan\").droppable({\nactiveClass:\"ui-state-active\",\nhoverClass: \"rotate\",\naccept:\".good\",\ndrop: function(event,ui) {\nui.draggable.fadeOut(function () {\nui.draggable.remove();\n});\n}\n});\n});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><br>3. You can add the following code inside body tag.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"><div>\n  <div id=\"draggables\">\n    <div class=\"good\">\n      Folder 1\n    <\/div>\n    <div class=\"good\">\n      Folder 2\n    <\/div> \n    <div class=\"good\">\n     Folder 3\n    <\/div>\n    <div class=\"bad\">\n     Folder 4\n    <\/div>\n  &lt;\/div&gt;  \n  <div>\n    <img decoding=\"async\" src=\"https:\/\/image.flaticon.com\/icons\/png\/512\/484\/484662.png\" alt=\"\" id=\"trashCan\" \/>\n  <\/div>\n&lt;\/div&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The final output like that:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1440\" height=\"742\" scale=\"0\" class=\"wp-image-3929\" style=\"width: 150px\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/03\/Screenshot-2019-03-27-at-6.29.05-PM.png\" alt=\"\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/03\/Screenshot-2019-03-27-at-6.29.05-PM.png 1440w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/03\/Screenshot-2019-03-27-at-6.29.05-PM-300x155.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/03\/Screenshot-2019-03-27-at-6.29.05-PM-768x396.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/03\/Screenshot-2019-03-27-at-6.29.05-PM-1024x528.png 1024w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks for using pheonixsolutions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You find this tutorial helpful? Share with your friends to keep it alive.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JQuery draggable\/droppable Date : 27\/03\/2019 In this article I will describe the Drag&amp;Drop feature from jQuery. In this post we [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[485,350],"class_list":["post-3921","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-html-css","tag-javascriptjquery","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-11f","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=3921"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3921\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=3921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=3921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=3921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}