"Drag&Drop"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class='light'> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/pongstr/pen/ByqwOX?depth=everything&limit=all&order=popularity&page=22&q=markdown+&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <style class="cp-pen-styles">@charset "UTF-8"; *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .light hr { border-top: 1px solid #eee; border-bottom: 1px solid #fff; } .dark hr { border-top: 1px solid #111; border-bottom: 1px solid rgba(102, 102, 102, 0.45); } html, body { height: 100%; } html.dark, body.dark { background-color: #333; } html.light, body.light { background-color: #fff; } .dark .widget { border-color: #222; background-color: #383838; } .dark .widget .widget-head { text-shadow: 0 0.5px 0 #000; background-color: #222; } .dark .widget .widget-body-table { background-color: #2b2b2b; } .dark .widget .widget-body-table span { text-shadow: 0 1px 1px #383838; color: #161616; } .light .widget { border-color: #ddd; } .light .widget .widget-head { text-shadow: 0 0.5 #fff; background-color: #ddd; } .light .widget .widget-body-table { background-color: #fff; } .light .widget .widget-body-table span { color: #c8c8c8; } .light .widget-container { border-right-color: #ddd; } .dark .widget-container { border-right-color: #222; } .widget-container { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-align-items: flex-start; align-items: flex-start; width: 100%; margin: 25px; } .widget { -moz-transition: left 0.1s ease, top 0.1s ease; -o-transition: left 0.1s ease, top 0.1s ease; -webkit-transition: left 0.1s ease, top 0.1s ease; transition: left 0.1s ease, top 0.1s ease; } .widget, .placeholder { -webkit-flex-grow: 0; flex-grow: 0; -webkit-flex-shrink: 1; flex-shrink: 1; -webkit-align-self: center; align-self: center; -webkit-flex-basis: 120px; flex-basis: 120px; position: relative; height: 90px; margin: 12px 8px; padding-top: 12px; border-width: 3px; border-style: solid; border-radius: 2px; border-color: transparent; } .widget-head { position: absolute; top: 0; left: 0; width: 100%; display: block; width: 100%; height: 12px; padding-left: 5px; font-size: 14px; line-height: 0.8; letter-spacing: 1px; color: orange; cursor: move; } .widget-head:before, .widget-head:after { content: "•"; } .widget-head:before { color: tomato; } .widget-head:after { color: #00b300; } .widget-body-table { position: relative; display: table; width: 100%; height: 100%; padding: 2px 8px; } .widget-body-table .framework { -webkit-filter: grayscale(100%); filter: grayscale(100%); position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; opacity: 0.25; } .widget-body-content { display: table-cell; height: 100%; text-align: center; vertical-align: middle; } .widget-body-content span { font-size: 40px; } .placeholder { border: 1px solid orange; background-color: rgba(255, 165, 0, 0.25); } .ui-sortable-helper { -moz-transition: box-shadow 0.5s ease; -o-transition: box-shadow 0.5s ease; -webkit-transition: box-shadow 0.5s ease; transition: box-shadow 0.5s ease; -moz-box-shadow: 0 32px 32px -16px rgba(66, 66, 66, 0.65); -webkit-box-shadow: 0 32px 32px -16px rgba(66, 66, 66, 0.65); box-shadow: 0 32px 32px -16px rgba(66, 66, 66, 0.65); } </style></head><body> <div class='widget-container' id='bootstrap'> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-twitter'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-github'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-instagram-outline'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-dribbble'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-pinterest-outline'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-dropbox'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-images'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-erlenmeyer-flask'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-bag'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-calendar'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-clock'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-funnel'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-connection-bars'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-pie-graph'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-close-circled'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-music-note'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-ios-cog'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-ios-location'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-html5-outline'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-css3-outline'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-javascript'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-markdown'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-angular-outline'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-android'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-ios-cloud'></span> <img class='framework' src='https://getbootstrap.com/apple-touch-icon.png'> </div> </div> </div> </div> <hr> <div class='widget-container' id='foundation'> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-twitter'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-github'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-instagram-outline'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-dribbble'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-pinterest-outline'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-dropbox'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-images'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-erlenmeyer-flask'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-bag'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-calendar'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-clock'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-funnel'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-connection-bars'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-pie-graph'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-close-circled'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-music-note'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-ios-cog'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-ios-location'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-html5-outline'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-css3-outline'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-javascript'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-markdown'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-angular-outline'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-social-android'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> <div class='widget'> <div class='widget-head'>•</div> <div class='widget-body-table'> <div class='widget-body-content'> <span class='ion-ios-cloud'></span> <img class='framework' src='https://foundation.zurb.com/assets/img/icons/apple-touch-icon-144x144-precomposed.png'> </div> </div> </div> </div> <hr> <div class='widget-container'> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> <script >(function() { $('#bootstrap, #foundation').sortable({ placeholder: 'placeholder', connectWith: '.widget-container', handle: '.widget-head', cursor: 'move' }); }).call(this); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: