Bootstrap Snippet draggable using HTML Bootstrap

"draggable"
Bootstrap 3.0.0 Snippet by evarevirus

3.0.0

798 0 Fav

Post to Facebook Tweet this

<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>  <!DOCTYPE html><html lang='en' class=''> <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/justin2hale/pen/bdgZPg?limit=all&page=50&q=editor" /> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://test-kirklands.rhcloud.com/webapp/css/editor.css'> <style class="cp-pen-styles">.searchWrap{background:white; box-shadow:none;} .highlight{border:1px dashed red;}.searchDiv {float: left; text-align:center; margin-bottom:12px; background:transparent;}.searchDiv .line {background: url(http://www.kirklands.com/assets/admin/line.png) no-repeat center;padding: 5px 0;}.searchDiv h2{font: italic 32px Georgia; color: #5f5749!important; margin-bottom: 6px; display: inline; background: white; padding: 0 15px;}.searchDiv .kDTable{width:760px; border-spacing: 10px; border-collapse: separate; float:none;}.searchDiv .kDTable td{text-align: center; box-shadow:0px 0px 5px #bbb; border-radius:3px; padding:0; padding-bottom:1%; height:auto; width:15%; box-shadow: 0 2px 6px -2px #666;}.searchDiv .kDTable td:hover{box-shadow:0px 0px 5px #888;}.searchDiv .kDTable a{text-decoration: none; color:#9d2c05; display:block;}.searchDiv .mask{width:100%; max-height:170px;}.searchDiv .kDTable img{width:100%; max-width:120px; margin-bottom:4%; border-radius:3px 3px 0 0;}.searchDiv .navBtn{clear:both; line-height: 15px; color:#701111; text-decoration: none; text-transform: none; font-size: 12px;}</style></head><body> <html> <head> <link href='https://fonts.googleapis.com/css?family=Lato:100,200,300,400' rel='stylesheet' type='text/css'> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <div class="toolbar"> <a id="importPopup" class="importCode"><span class="glyphicon glyphicon-upload"></span>IMPORT CODE</a> <h1> Kirkland's <span>Web Apps</span> </h1> </div> <div class="instruction paddifier"> <h1> Quick Links <span>Editor</span> </h1> </div> <div class="paddifier"> <label>Preview:</label> </div> <div class="searchWrap"> <div class="tableOutput"> <div class="searchDiv"> <div class="line"> <h2>Quick Links</h2></div> <table class="kDTable"> <tbody> <tr> <td id="column1"> <a id="link1" href="http://www.kirklands.com/thumbnail/Furniture/Chairs/Accent-Chairs/pc/2285/c/2316/2628.uts"> <img id="image1" alt="#" src="http://s7d5.scene7.com/is/image/Kirklands/115775?id=8jqkj0&fmt=jpg&fit=constrain,1&wid=358&hei=358" /> <div> <span id="title1" class="navBtn">Accent Chairs</span> </div> </a> </td> <td id="column2"> <a id="link2" href="http://www.kirklands.com/thumbnail/Furniture/Chairs/Dining-Chairs/pc/2285/c/2316/2627.uts"> <img id="image2" alt="#" src="http://s7d5.scene7.com/is/image/Kirklands/112350?id=Pn1kO1&fmt=jpg&fit=constrain,1&wid=358&hei=358" /> <div> <span id="title2" class="navBtn">Dining Room Chairs</span> </div> </a> </td> <td id="column3"> <a id="link3" href="http://www.kirklands.com/thumbnail/Furniture/Chairs/Recliners-Lounge-Chairs/pc/2285/c/2316/2921.uts"> <img id="image3" alt="#" src="http://s7d5.scene7.com/is/image/Kirklands/115504?id=uHakt0&fmt=jpg&fit=constrain,1&wid=358&hei=358" /> <div> <span id="title3" class="navBtn">Recliners & Lounge Chairs</span> </div> </a> </td> <td id="column4"> <a id="link4" href="http://www.kirklands.com/catalog/search_sp.cmd?i=1&q=*&q1=Furniture&q2=Chairs&q3=Upholstered&store=1&x1=primary-cat-name1&x2=primary-cat-name2&x3=material-name"> <img id="image4" alt="#" src="http://s7d5.scene7.com/is/image/Kirklands/126542_3?id=IwlkA1&fmt=jpg&fit=constrain,1&wid=358&hei=358" /> <div> <span id="title4" class="navBtn">Upholstered Chairs</span> </div> </a> </td> <td id="column5"> <a id="link5" href="http://www.kirklands.com/catalog/search_sp.cmd?i=1&q=*&q1=Furniture&q2=Chairs&q3=Leather&store=1&x1=primary-cat-name1&x2=primary-cat-name2&x3=material-name"> <img id="image5" alt="#" src="http://s7d5.scene7.com/is/image/Kirklands/106655?id=JKckb2&fmt=jpg&fit=constrain,1&wid=358&hei=358" /> <div> <span id="title5" class="navBtn">Leather Chairs</span> </div> </a> </td> </tr> </tbody> </table> <div class="line"></div> </div> </div> <br clear="all" /> </div> <div class="row formifier" style="margin-top:0;"> <div style="TEXT-ALIGN: center;" class="col-md-6"> <button id="removeCategory" class="btn btn-danger" style="border-radius:0 0 5px 5px;"><span class="glyphicon glyphicon-minus-sign"></span>Category</button> </div> <div style="TEXT-ALIGN: center;" class="col-md-6"> <button id="addCategory" class="btn btn-success" style="border-radius:0 0 5px 5px;"><span class="glyphicon glyphicon-plus-sign"></span>Category</button> </div> </div> <div class="formifier"> <div class="row"> <form role="form"> <div class="form-group col-md-4"> <label for="columnNumber">Column:</label> <select name="columnNumber" id="columnNumber"> <option value="none" selected="selected" disabled="disabled">Select One...</option> </select> </div> <div class="form-group col-md-8"> <label for="linkUrl">Link URL:</label> <input id="linkUrl" class="form-control" placeholder="http://" /> </div> </form> </div> <div class="row"> <form role="form"> <div class="form-group col-md-7"> <label for="imageSource">Image Source:</label> <input id="imageSource" class="form-control" placeholder="http://s7d5.scene7.com/" /> </div> <div class="form-group col-md-5"> <label for="columnTitle">Title:</label> <input id="columnTitle" class="form-control" placeholder="Amazing Frames!" /> </div> </form> </div> <div class="row"> <div style="TEXT-ALIGN: right" class="col-md-6"> <button id="changeColumn" class="btn btn-primary"><span class="glyphicon glyphicon-repeat"></span>Refresh</button> </div> <div class="col-md-6"> <button id="getCode" class="btn btn-info"><span class="glyphicon glyphicon-download"></span>Get Code!</button> </div> </div> </div> <div class="paddifier"> <div style="MARGIN-TOP: 0px; BORDER-TOP: 0px; PADDING-TOP: 0px" class="row"> <div class="col-md-12 form-group"> <label for="outputCode">Output: (Click inside, CTRL+C)</label> <textarea id="outputCode" class="form-control" onclick="this.select();" rows="10"></textarea> </div> </div> </div> <div class="popUp" id="popUp"> <div class="popUp-inner"> <div style="MARGIN-TOP: 0px; BORDER-TOP: 0px; PADDING-TOP: 0px" class="row"> <div class="col-md-12 form-group"> <label for="inputCode">Import Code (copy from site manager and paste into the text-box below):</label> <textarea id="inputCode" class="form-control" onclick="this.select();" rows="15"></textarea> </div> </div> <div class="row"> <div style="TEXT-ALIGN: center" class="col-md-12"> <button id="changeInput" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span>Submit</button> </div> </div> <span id="closeWindow" class="btn btn-info" onclick="$('#popUp').hide();"><span class="glyphicon glyphicon-remove"></span>Close</span> </div> </div> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >//READY var currentNum = 0; $( '.kDTable' ).on( 'click', 'a', function () { event.preventDefault(); $('.kDTable tbody tr td').removeClass("highlight"); $(this).parent().addClass("highlight"); $("#columnNumber").val(($(this).attr("id").replace("link", ""))); currentNum = $("#columnNumber option:selected").attr("value"); }); $(document).ready(function() { $("#popUp").hide(); $("#importPopup").click(function() { $("#popUp").show(); }); $("#changeInput").click(function() { $(".tableOutput").html($("#inputCode").val()); $(".tableOutput link").remove(); $("#popUp").hide(); }); var startNum = 0; $('.kDTable tbody tr').children().each( function() { //alert($("span",this).html()); startNum = startNum + 1; $("#columnNumber").append('<option value="' + startNum + '" id="option' + startNum + '">' + $("span", this).html() + '</option>'); } ); $("#addCategory").click(function() { startNum = startNum + 1; var column = '<td id="column' + startNum + '"><a id="link' + startNum + '" href=""><img id="image' + startNum + '" src="" alt=""><div><span id="title' + startNum + '" class="navBtn">'+startNum+'</span></div></a>'; $(".kDTable tr").append(column); $("#columnNumber").append('<option value="' + startNum + '" id="option' + startNum + '">' + startNum + '</option>'); }); $("#removeCategory").click(function() { $("#option" + currentNum).remove(); $("#column" + currentNum).remove(); //startNum = startNum - 1; }); $("#changeColumn").click(function() { var columnNumber = "column" + $("#columnNumber").val(); var optionNumber = "option" + $("#columnNumber").val(); $("#option" + columnNumber).addClass("hello"); if ($("#linkUrl").val()) { $("#" + columnNumber + " a").attr("href", $("#linkUrl").val()); } if ($("#imageSource").val()) { $("#" + columnNumber + " img").attr("src", $("#imageSource").val()); } if ($("#columnTitle").val()) { $("#" + columnNumber + " span").html($("#columnTitle").val()); $("#" + optionNumber).html($("#columnTitle").val()); } }); $("#getCode").click(function() { var styling = unescape("<style>.highlight{border:1px dashed red;}.searchDiv {float: left; text-align:center; margin-bottom:12px; background:transparent;}.searchDiv .line {background: url(http://www.kirklands.com/assets/admin/line.png) no-repeat center;padding: 5px 0;}.searchDiv h2{font: italic 32px Georgia; color: #5f5749!important; margin-bottom: 6px; display: inline; background: white; padding: 0 15px;}.searchDiv .kDTable{width:760px; border-spacing: 10px; border-collapse: separate; float:none;}.searchDiv .kDTable td{text-align: center; box-shadow:0px 0px 5px #bbb; border-radius:3px; padding:0; padding-bottom:1%; height:auto; width:15%; box-shadow: 0 2px 6px -2px #666;}.searchDiv .kDTable td:hover{box-shadow:0px 0px 5px #888;}.searchDiv .kDTable a{text-decoration: none; color:#9d2c05; display:block;}.searchDiv .mask{width:100%; max-height:170px;}.searchDiv .kDTable img{width:100%; max-width:120px; margin-bottom:4%; border-radius:3px 3px 0 0;}.searchDiv .navBtn{clear:both; line-height: 15px; color:#701111; text-decoration: none; text-transform: none; font-size: 12px;}</style>"); var output = $(".tableOutput").html().trim(); $("#outputCode").html(styling+output); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Now UI Kit PRO

Questions / Comments:

Posting GuidelinesFormatting