Skip to content

Instantly share code, notes, and snippets.

@Stwissel

Stwissel/bootstrapquestion.html

Last active August 22, 2016 04:34
Show Gist options
  • Save Stwissel/69a7b44d8501e3a7fb1479b1dabf3dbd to your computer and use it in GitHub Desktop.
Save Stwissel/69a7b44d8501e3a7fb1479b1dabf3dbd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootstrapquestion.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to make this draggable</title>
<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<divclass="row">
<div class="col-sm-4" id="picklist" style="border-right : 1px solid blue">
<h3>Pick a topic</h3>
<ul>
<li style="background-color: #FFFFCC">
Lorem ipsum dolor sit amet
</li>
<li>
Consectetur adipiscing elit
</li>
<li>
Integer molestie lorem at massa
</li>
<li>
Facilisis in pretium nisl aliquet
</li>
<li>
Nulla volutpat aliquam velit
</li>
<li>
Faucibus porta lacus fringilla vel
</li>
<li>
Aenean sit amet erat nunc
</li>
<li>
Eget porttitor lorem
</li>
</ul>
</div>
<div id="mainarticle" class="col-sm-8" style="border-left: 3px solid red">
<h3>
Lorem ipsum dolor sit amet
</h3>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
var masterDrag = "#mainarticle";
var dependentDrag = "#picklist";
console.log('Initial values:')
console.log('Mainarticle: '+ $(masterDrag).width());
console.log('Picklist: ' + $(dependentDrag).width());
$(masterDrag).resizable({
dependentStartSize : 0,
handles: "w",
start: function(e, ui) {
dependentStartSize = $(dependentDrag).width();
},
resize: function(e, ui) {
var sizeChange = ui.position.left - ui.originalPosition.left;
var newDependenSize = dependentStartSize+sizeChange;
console.log('Original: '+ui.originalSize.width);
console.log('New: '+ ui.size.width);
console.log('Change: '+ sizeChange);
console.log('new Left:' + newDependenSize);
$(dependentDrag).width(newDependenSize);
},
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment