doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
131 lines (112 loc) • 3.35 kB
HTML
<html lang="en">
<head>
<title>drag</title>
<style type='text/css'>
body {font-family: verdana}
.handle {
width: 300px;
height: 25px;
border: dashed 1px red;
cursor : pointer;
}
.revert {
float: left;
}
.big {
height: 100px;
}
#container {
padding: 20px;
border: dashed 2px green;
}
#representative {
width: 100px;
height: 60px;
border: solid 1px blue;
cursor: pointer;
}
#scrollarea ul li {height: 40px; border: solid 1px gray; font-size: 25px;list-style: none}
#scrollarea ul {margin: 0px;padding: 0px;}
#scrollarea {
width: 200px; height: 100px; overflow: auto;
border: solid 2px black;
}
h2 {clear: both;}
</style>
</head>
<body>
<div id='demo-html'>
<h2>Drag with bind</h2>
<div id="drag" class='handle'>Drag Me</div>
<h2>Delegated Drags</h2>
<div id="delegate">
<div class='handle'>handle</div>
<div class='handle'>handle</div>
</div>
<h2>Drag Ghost</h2>
<div id="ghost" class='handle'>Drag and I get cloned</div>
<h2>Drag Revert</h2>
<div class='handle revert'>Drag and let me go</div>
<div class='handle revert'>Drag and let me go</div>
<h2>Limit Drag</h2>
<div id='container'>
<div class='handle'>drag me out of bounds</div>
</div>
<h2>Drag Representative</h2>
<div id='repdrag' class='handle'>Drag a Representative</div>
<div id='representative' style='display: none'>I represent You</div>
<h2>Drag Horizontal</h2>
<div id='horizontal' class='handle'>I only move horizontal</div>
<h2>Drag Distance</h2>
<div id='distance' class='handle'>You have to move me 50 pixels</div>
<h2>Drag Scrolls</h2>
<div id='scroll-drag' class='handle'>I move scrollbars</div>
<div id='scrollarea'>
<ul><li>1</li><li>2</li><li>3</li>
<li>4</li><li>5</li><li>6</li>
<li>7</li><li>8</li><li>9</li></ul>
</div>
</div>
<h2>Allow Text Selection</h2>
<div id='form-drag' class='handle big'>
<p>I should be able to drag on this</p>
<input type='text' value='I can be clicked on'/>
</div>
<script type='text/javascript' src='../../node_modules/steal/steal.js' main='@empty'></script>
<script type='text/javascript' id='demo-source'>
steal("jquerypp/event/drag",
"jquerypp/event/drag/scroll",
"jquerypp/event/drag/limit",function(){
//drag with bind
$("#drag").on("draginit",function(){})
//delegated drags
$("#delegate").delegate(".handle","draginit",function(){})
//ghost
$("#ghost").on("draginit",function(ev, drag){drag.ghost()})
//revert
$(".revert").on("draginit",function(ev, drag){ drag.revert() })
//limit
$("#container").delegate(".handle","draginit",function(ev, drag){drag.limit( $("#container") )})
//representative
$("#repdrag").on("draginit",function(ev, drag){drag.representative($("#representative"),50,30)})
//horizontal
$("#horizontal").on("draginit",function(ev, drag){drag.horizontal()})
//distance
$('#distance').on('dragdown', function(ev, drag){
ev.preventDefault();
drag.distance(50)
})
//scrolls
$("#scroll-drag").on("draginit",function(ev, drag){drag.scrolls( $("#scrollarea") )})
// allow form elements to be selected
$("#form-drag").on("dragdown",function(ev, drag){
if(ev.target.nodeName.toLowerCase() == 'input'){
drag.cancel();
}
});
});
</script>
</body>
</html>