"draggable"
Bootstrap 3.0.0 Snippet by evarevirus

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> <!------ Include the above in your HEAD tag ----------> <!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/charlie-volpe/pen/zjquA" /> <meta name="viewport" content="width=device-width"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800); * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 12px; } body { background: #c7c7c7; font-family: "Open Sans", sans-serif; } .slider { position: absolute; top: 0; left: 0; width: 100%; font-size: 12px; padding: 12px; } input[type="range"] { -webkit-appearance: none; height: 3px; width: 100%; border: 1px solid #000; background: #a7a7a7; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background: #f7f7f7; border: 1px solid #000; width: 12px; height: 12px; border-radius: 50%; outline: none; } .node { position: absolute; background: #f7f7f7; top: 1.5rem; left: 1.5rem; width: 10rem; height: 8rem; border-radius: .25rem; border: 1px solid #000; } #n-1 { top: 5rem; left: 1rem; } #n-2 { top: 10rem; left: 15rem; } .connector { position: absolute; background: #f7f7f7; top: 1.45rem; width: .7rem; height: .7rem; border: 1px solid #000; cursor: pointer; } .connector:hover { background: #373737; } .input { left: -.7rem; } .output { right: -.7rem; } .header { height: 1.5rem; line-height: 1.5rem; color: #202020; border-bottom: 1px solid #000; text-align: center; cursor: default; } .content { padding: 5%; font-size: .8rem; } input[type="text"] { position: relative; background: #f7f7f7; border: 1px solid #000; outline: none; width: 100%; } input[type="button"] { position: relative; background: #f7f7f7; border: 1px solid #000; border-radius: .25rem; outline: none; width: 100%; } input[type="button"]:hover { background: #c7c7c7; } input[type="text"]:focus { border: 1px solid #a7a7a7; } .ui-tooltip { font-size: .6rem; padding: .5rem; width: 10rem; text-align: center; }</style></head><body> <svg id="drawing"> <div class="slider"> <label for="scale">Scale</label> <input id="scale" type="range" min="8" max="16" /> </div> <div id="n-1" class="node"> <div class="connector input" title="Input for the Node."></div> <div class="connector output" title="Output for the Node."></div> <div class="header" title="Name of the Node."> Activate Node </div> <div class="content"> <input type="button" value="Activate Output"/> </div> </div> <div id="n-2" class="node"> <div class="connector input" title="Input for the Node."></div> <div class="connector output" title="Output for the Node."></div> <div class="header" title="Name of the Node."> Text Input Node </div> <div class="content"> <label for="ti" title="Label for the input.">Text Input</label> <input id="ti"type="text" placeholder="click to input..."/> </div> </div> </svg> <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='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/svg.js/1.0rc3/svg.min.js'></script> <script >var draw = SVG('drawing'); var path = draw.path('M50,50 C75,50 125,120 150,120').fill('none').stroke({width: 1}); $(function() { $( document ).tooltip( { track: true }); var el, newValue; $("input[type='range']").change(function() { el = $(this); $('html').css('font-size',el.val().toString() + 'px'); }); }); $('.node').draggable(); var timer = setInterval(Update, 1000/30); function Update(){ var sNode = $('#n-1').position(); var eNode = $('#n-2').position(); var output = $('.connector.output').position(); var input = $('.connector.input').position(); var sPointLeft = sNode.left + output.left + 5; var ePointLeft = eNode.left + input.left + 5; var sPointTop = sNode.top + output.top + 5; var ePointTop = eNode.top + input.top + 5; path.plot('M'+ sPointLeft + ' ' + sPointTop + "C" + (sPointLeft + 50) + ' ' + sPointTop + ' ' + (ePointLeft - 50) + ' ' + ePointTop + ' ' + ePointLeft + ' ' + ePointTop ); } //# sourceURL=pen.js </script> </body></html>

Related: See More

Vue Light Bootstrap Dashboard

Questions / Comments: