doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
71 lines (64 loc) • 1.65 kB
HTML
<html lang="en">
<head>
<title>drag</title>
<style type='text/css'>
body {font-family: verdana}
.error {border: solid 1px red;}
.error_text { color: red; font-size: 10px;}
td {padding: 3px;}
.handle {
width: 98px;
height: 38px;
border: dashed 1px red;
cursor : pointer;
}
#internal .handle {
border-color: green;
}
#internal {
border: solid 3px green;
padding: 5px;
margin-top: 50px;
}
#ondoc {
border: solid 5px green;
padding: 0px;
height: 240px;
width: 420px;
}
#demo-html{
padding: 30px 0px 0px 30px;
}
</style>
</head>
<body>
<div id='demo-html'>
<div id="ondoc">
<div id='handle' class='handle'>top left</div>
<div id='handle2' class='handle'>horizontal</div>
<div id='handle3' class='handle'>vertical</div>
<div id='handle4' class='handle'>horizontal vertical</div>
</div>
</div>
<script type='text/javascript' src='../../../../steal/steal.js'></script>
<script type='text/javascript' id='demo-source'>
steal('jquerypp/event/drag/step', function(){
$("#ondoc")
.delegate('#handle',"draginit", function(ev, drag){
drag.step(40,$("#ondoc"))
})
.delegate('#handle2',"draginit", function(ev, drag){
drag.step(40,$("#ondoc"),"x")
})
.delegate('#handle3',"draginit", function(ev, drag){
drag.step({y: 40},$("#ondoc"),"y")
})
.delegate('#handle4',"draginit", function(ev, drag){
drag.step(40,$("#ondoc"),"xy")
});
})
</script>
</body>
</html>