doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
72 lines (66 loc) • 1.7 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: 300px;
height: 25px;
border: dashed 1px red;
cursor : pointer;
}
#internal .handle {
border-color: green;
}
#internal {
border: solid 3px green;
padding: 5px;
margin-top: 50px;
}
#ondoc {
border: solid 3px red;
padding: 5px;
}
</style>
</head>
<body>
<div id="internal">
<div class='handle'>handle</div>
<div class='handle'>handle</div>
</div>
<div id="ondoc">
<div class='handle'>handle</div>
<div class='handle'>handle</div>
</div>
<script type='text/javascript'
src='../../../../steal/steal.js?jquerypp/event/drag/limit'>
$("#ondoc .handle").live("draginit", function(ev, drag){
drag.limit($("#ondoc"))
})
$("#ondoc .handle").live("dragmove", function(ev, drag){
//console.log("dragmove",this, ev, drag)
})
$("#ondoc .handle").live("dragend", function(ev, drag){
//console.log("dragend",this, ev, drag)
})
$("#ondoc .handle").live("mouesdown", function(){
//console.log("mousedowned")
})
$("#internal").delegate(".handle","draginit", function(ev, drag){
drag.limit($("#internal"), true)
})
//do internal
var jq = $()
jq.context = document.getElementById("internal")
jq.selector = ".handle"
jq.live("dragstart",function(ev, drag){
console.log("internal works")
})
</script>
</body>
</html>