{"id":20069,"date":"2014-05-21T13:01:04","date_gmt":"2014-05-21T05:01:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=20069"},"modified":"2025-04-04T01:52:24","modified_gmt":"2025-04-03T17:52:24","slug":"draggable-elements-with-draggabilly-js","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/","title":{"rendered":"Make Elements On Your Site Draggable  With Draggabilly.js"},"content":{"rendered":"<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/modernizr.com\/\">Modernizr<\/a><\/strong> is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/modernizr\/\">previous posts<\/a>, we have mentioned it several times, but we have not actually dug into what Modernizr is.<\/p>\n<p>So, in this post we will specifically discuss this JavaScript Library.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/\" class=\"ref-block__link\" title=\"Read More: Getting Started with Twitter Bootstrap\" rel=\"bookmark\"><span class=\"screen-reader-text\">Getting Started with Twitter Bootstrap<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/twitter-bootstrap.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-16256 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/twitter-bootstrap.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Getting Started with Twitter Bootstrap<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tBuilding a website from the ground up is very hard. Even some people who are able to code...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>What is it?<\/h2>\n<p>First of all, let\u2019s get the essential question answered: <strong>what is Modernizr?<\/strong><\/p>\n<p>Based on the official site, Modernizr is <em>\u201cA JavaScript library that detects HTML5 and CSS3 features in the user\u2019s browser.\u201d<\/em><\/p>\n<p>Although <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\/\">HTML5 and CSS3<\/a> are great but many of the new features they have, as we already know by now, <a href=\"https:\/\/www.hongkiat.com\/blog\/complete-guide-to-cross-browser-compatibility-check\/\">are not much applicable in old browsers<\/a>.<\/p>\n<p>Modernizr helps to address this problem by testing the user\u2019s browser on whether it supports a particular feature. If the feature is <strong>\u201cunsupported\u201d<\/strong>, then we can deliver an appropriate script or function to imitate the feature it lacks.<\/p>\n<p class=\"note\"><strong>Recommended Reading<\/strong>: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Modernizr#What_Modernizr_doesn.27t_do\">What Modernizr doesn\u2019t do?<\/a><\/p>\n<h2>Setting-up Modernizr<\/h2>\n<p>At the Modernizr official website, we will find two options to download the file, <strong>Development<\/strong> and <strong>Production<\/strong> version.<\/p>\n<p>The Development version is a full and uncompressed version consisting of all the primary feature tests; while in the Production version, we can select the feature tests that we only need.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg\" alt=\"modernizr download page\" width=\"1000\" height=\"561\"><\/figure>\n<p>As you can see, there are a lot of options for feature tests <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/modernizr.com\/download\/?setclasses\">in the download page<\/a>. In this example, we will select all the primary feature tests. Generate and grab the codes. Then, insert the file inside the <code>&lt;head&gt;<\/code> section.<\/p>\n<p>There\u2019s a lot of tutorials out there on how to <strong>make things draggable in a web page<\/strong>. <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/jquery\/\">jQuery<\/a> is one of the easiest ways. You don\u2019t even need the jQuery UI, just a little help from the mouse direction function and perhaps some optional handling. But what if you don\u2019t want to touch any jQuery code yet still want to make things draggable? Then, <strong>draggabilly.js<\/strong> is the right tool for you.<\/p>\n<p>With <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/draggabilly.desandro.com\/\">Draggabilly.js<\/a>, you can make any element on a web page draggable. You can <strong>customize the behavior of the draggable element<\/strong> like adding <a href=\"https:\/\/www.hongkiat.com\/blog\/dynamic-grid-layout-freewall\/\">grid<\/a> movement, binding event listeners to events, limiting the movements to only the x- or y-axis and much more. It also <strong>supports various browsers<\/strong>, IE8+ and even multi-touch mobile browsers.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-2\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-swipe-slider\/\" class=\"ref-block__link\" title=\"Read More: Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide)\" rel=\"bookmark\"><span class=\"screen-reader-text\">Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide)<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/jquery-swipe-slider.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-18427 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/jquery-swipe-slider.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tImage\/Content Slider is one of the common components we find in a website. It is quite simple to...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Getting Started<\/h2>\n<p>To get started, you only need to include the <strong>Draggabilly.js<\/strong> source to your site. There isn\u2019t a need for other dependencies. You can grab the file from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/desandro\/draggabilly\">GitHub<\/a>.<\/p>\n<pre>\r\n&lt;script src=\"js\/draggabilly.pkgd.min.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>As for the rest, you\u2019ll be working with some JavaScript functions as per below.<\/p>\n<h2>Basic Dragging<\/h2>\n<p>You need to include the following snippet in your page so that the dragging can work.<\/p>\n<pre>\r\nvar elem = document.querySelector('#idHere');\r\nvar draggie = new Draggabilly(elem, {\r\n  \/\/ options...\r\n});\r\n<\/pre>\n<p>The <code>#idHere<\/code> is the id you should put inside the HTML element you want to make draggable. While in the <code>draggie<\/code> variable, you can put in an option if you\u2019d like. If you don\u2019t need to have that option, you can also define the id from the <code>elem<\/code> variable.<\/p>\n<p>For instance, if I have an id of <code>#demo<\/code> without any option, then I can write the snippet like so:<\/p>\n<pre>\r\nvar elem = document.querySelector('#demo');\r\nvar draggie = new Draggabilly('#demo');\r\n<\/pre>\n<p>Then inside the HTML, call the id of the element you wish to turn draggable. The following is a basic example.<\/p>\n<pre>\r\n&lt;div class=\"demo-frame\"&gt;\r\n  &lt;div class=\"justDemo\"&gt;\r\n    &lt;div id=\"demo\" class=\"relative\"&gt;\r\n      &lt;div class=\"centered\"&gt;Drag me&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>There are many other ways to affect Draggabilly\u2019s behavior. You can restrict the dragging to be only in the \u2018y\u2019 or \u2018x\u2019 axis like so:<\/p>\n<pre>\r\nnew Draggabilly('#demo', {\r\n  axis: 'x'\r\n});\r\n<\/pre>\n<p>Or you can add a handling option, which will specify the starting element of the drag interaction like so:<\/p>\n<pre>\r\nvar elem = document.querySelector('#demo');\r\nnew Draggabilly(elem, {\r\n  handle: '.handle'\r\n});\r\n<\/pre>\n<p>This <code>.handle<\/code> option is useful when all inner elements like inputs and forms don\u2019t need to be draggable. There are still many other options you can add like containments, grids, methods, and events. Head over to Draggabilly\u2019s <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/draggabilly.desandro.com\/\">official homepage<\/a> to see the full documentation.<\/p>\n<h2>Final Thought<\/h2>\n<p>The dragging feature, in most cases, has little effect on web design but it\u2019s still pretty important. It takes place most often in web apps or games. The simplicity of its installation and the variety of different dragging methods makes this a really handy tool to try out.<\/p>","protected":false},"excerpt":{"rendered":"<p>Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we have mentioned it several times, but we have not actually dug into what Modernizr is. So, in this post we will specifically discuss this JavaScript Library. What is it? First of all,&hellip;<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Make Elements On Your Site Draggable With Draggabilly.js - Hongkiat<\/title>\n<meta name=\"description\" content=\"Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we\" \/>\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.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make Elements On Your Site Draggable With Draggabilly.js\" \/>\n<meta property=\"og:description\" content=\"Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-21T05:01:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:52:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/draggable-elements-with-draggabilly-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/draggable-elements-with-draggabilly-js\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Make Elements On Your Site Draggable With Draggabilly.js\",\"datePublished\":\"2014-05-21T05:01:04+00:00\",\"dateModified\":\"2025-04-03T17:52:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/draggable-elements-with-draggabilly-js\\\/\"},\"wordCount\":694,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/draggable-elements-with-draggabilly-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/modernizr\\\/download-modernizr.jpg\",\"keywords\":[\"Javascripts\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/draggable-elements-with-draggabilly-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/draggable-elements-with-draggabilly-js\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/draggable-elements-with-draggabilly-js\\\/\",\"name\":\"Make Elements On Your Site Draggable With Draggabilly.js - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/draggable-elements-with-draggabilly-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/draggable-elements-with-draggabilly-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/modernizr\\\/download-modernizr.jpg\",\"datePublished\":\"2014-05-21T05:01:04+00:00\",\"dateModified\":\"2025-04-03T17:52:24+00:00\",\"description\":\"Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/draggable-elements-with-draggabilly-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/draggable-elements-with-draggabilly-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/draggable-elements-with-draggabilly-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/modernizr\\\/download-modernizr.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/modernizr\\\/download-modernizr.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/draggable-elements-with-draggabilly-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make Elements On Your Site Draggable With Draggabilly.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Make Elements On Your Site Draggable With Draggabilly.js - Hongkiat","description":"Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we","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.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/","og_locale":"en_US","og_type":"article","og_title":"Make Elements On Your Site Draggable With Draggabilly.js","og_description":"Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we","og_url":"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-05-21T05:01:04+00:00","article_modified_time":"2025-04-03T17:52:24+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Make Elements On Your Site Draggable With Draggabilly.js","datePublished":"2014-05-21T05:01:04+00:00","dateModified":"2025-04-03T17:52:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/"},"wordCount":694,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg","keywords":["Javascripts"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/","url":"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/","name":"Make Elements On Your Site Draggable With Draggabilly.js - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg","datePublished":"2014-05-21T05:01:04+00:00","dateModified":"2025-04-03T17:52:24+00:00","description":"Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/draggable-elements-with-draggabilly-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Make Elements On Your Site Draggable With Draggabilly.js"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5dH","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=20069"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20069\/revisions"}],"predecessor-version":[{"id":73691,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20069\/revisions\/73691"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=20069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=20069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=20069"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=20069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}