<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="fontawesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="box-drag.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="demo">
<div class="container" ng-controller="SillyController as silly">
<div class="row">
<div class="col-md-12">
<p>You are reviewing a sample of an angular directive called <a href="https://github.com/mg1075/angular-box-drag" target="_blank"><strong>angular-box-drag</strong></a>.</p>
<p><strong>Drag the box around.<br />
Click the X in the top right of the box to close it.<br />
Scroll down the page, and then move the box.</strong></p>
<p ng-show="silly.boxDisplay === false"><button class="btn btn-success btn-sm" ng-click="silly.boxDisplay = !silly.boxDisplay">Open the draggable box!</button></p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
<p>This is filler content to allow for a scrollbar.</p>
</div>
</div>
<box-drag class="box-drag-shell" width="300px" ng-show="silly.boxDisplay === true">
<div class="box-drag-header box-drag-handle box-header-inverse">
<span class="text-left b">Hold the dark header and drag.</span>
<div class="pull-right padding-left-10 padding-right-15 cursor-pointer" ng-click="silly.boxDisplay = !silly.boxDisplay">
<i class="fa fa-times"></i>
</div>
</div>
<div class="box-drag-body">
<div class="padding-top-15 padding-bottom-15">
<div class="col-md-4">
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
</div>
<div class="col-md-8">
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
</div>
</div>
</div>
<div class="box-drag-footer bg-grey">
<button class="btn btn-info btn-sm">Do something</button>
</div>
</box-drag>
</div>
</body>
</html>
body {
padding-top: 40px;
}
/*
Box shell inspired by material design;
also see: http://materializecss.com/cards.html
*/
.box-drag-shell {
z-index: 8888;
background-color: #fff;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.box-drag-handle {
cursor: move;
}
.box-header-inverse {
background-color: #444444;
color: #fefefe;
}
.box-drag-body {
overflow-y: auto;
}
.box-drag-footer {
border-top: 1px solid #dddddd;
}
.padding-top-15 {
padding-top: 15px;
}
.padding-bottom-15 {
padding-bottom: 15px;
}
.bg-grey { background-color: #eeeeee; }
.cursor-pointer {
cursor: pointer;
}
For more details, see:
https://github.com/mg1075/angular-box-drag
(function(){"use strict";angular.module("boxDrag",[]).directive("boxDrag",boxDrag);boxDrag.$inject=["$document"];function boxDrag($document){var directive={link:link,restrict:"E"};return directive;function link(scope,element,attrs){var startX=0,startY=0,x=0,y=20;element.css({position:"fixed",top:attrs.top||undefined,left:attrs.left||undefined,bottom:attrs.bottom||"20px",right:attrs.right||"20px",width:attrs.width||"400px"});angular.element(element[0].querySelector("div.box-drag-header")).css({padding:attrs.paddingHeader||"7px 10px"});angular.element(element[0].querySelector("div.box-drag-body")).css({height:attrs.bodyHeight||"310px"});angular.element(element[0].querySelector("div.box-drag-footer")).css({padding:attrs.paddingFooter||"7px 10px"});var height_header=angular.element(element[0].querySelector("div.box-drag-header")).prop("offsetHeight"),height_body=angular.element(element[0].querySelector("div.box-drag-body")).prop("offsetHeight"),height_footer=angular.element(element[0].querySelector("div.box-drag-footer")).prop("offsetHeight");element.css({height:height_header+height_body+height_footer+"px"});var initialMove=true;var jqLiteOffset=function(element){var documentElem,box={top:0,left:0},doc=element&&element.ownerDocument;documentElem=doc.documentElement;if(typeof element.getBoundingClientRect!==undefined){box=element.getBoundingClientRect()}return{top:box.top+(window.pageYOffset||documentElem.scrollTop)-(documentElem.clientTop||0),left:box.left+(window.pageXOffset||documentElem.scrollLeft)-(documentElem.clientLeft||0),innerTop:box.top}};angular.element(element[0].querySelector("div.box-drag-handle")).on("mousedown",function(event){event.preventDefault();x=jqLiteOffset(element[0]).left;y=jqLiteOffset(element[0]).top;startX=event.pageX-x;startY=event.pageY-y;$document.on("mousemove",mousemove);$document.on("mouseup",mouseup)});function mousemove(event){element.css({position:"absolute"});y=event.pageY-startY;x=event.pageX-startX;element.css({top:y+"px",left:x+"px"})}function mouseup(){$document.unbind("mousemove",mousemove);$document.unbind("mouseup",mouseup);element.css({position:"fixed",top:jqLiteOffset(element[0]).innerTop+"px"})}}}})();
(function () {
"use strict";
angular
.module("demo", [
"boxDrag"
])
.controller("SillyController", SillyController);
function SillyController() {
var vm = this;
vm.boxDisplay = true;
}
})();