doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
83 lines (79 loc) • 2.04 kB
HTML
<html lang="en">
<head>
<title>drop</title>
<style type='text/css'>
.handle {
width: 100px;
height: 25px;
border: dashed 1px red;
cursor : pointer;
}
.dropout, .dropmove, .cancel {
width: 200px;
height: 50px;
border: dashed 1px green;
cursor : pointer;
background-color: white;
}
#dropout {
padding: 20px;
border: solid 1px blue;
}
.over {
background-color: yellow;
}
</style>
</head>
<body>
<div id='demo-html'>
<h2>Drop Demo</h2>
<div class='handle'>Drag Me</div>
<h2>Dropout/Dropover</h2>
<div id='dropout'>
<div class='dropout'></div>
<div class='dropout'></div>
</div>
<a href="javascript://" id='undelegate'>undelegate</a>
<h2>Dropmove/Dropon</h2>
<div class='dropmove'></div>
<span>Drop Count <span class='count'>0</span></span>
</div>
<script type='text/javascript' src='../../node_modules/steal/steal.js' main='@empty'></script>
<script type='text/javascript' id='demo-source'>
steal('jquerypp/event/drop', function(){
//make drags
$('.handle').on("draginit", function(){})
//add dropout/dropover
$('#dropout')
.delegate(".dropout","dropover", function(){
$(this).addClass('over')
})
.delegate(".dropout","dropout", function(){
$(this).removeClass('over')
})
.bind("dropover", function(){
$(this).addClass('over')
})
.bind("dropout", function(){
$(this).removeClass('over')
});
//turn off dropout/dropover
$("#undelegate").click(function(){
$('#dropout').undelegate(".dropout","dropover");
$('#dropout').undelegate(".dropout","dropout");
})
//add dropmove/dropon
var count = 0
$('.dropmove')
.bind('dropmove', function(){
$('.count').text(count++)
})
.bind('dropon', function(){
$(this).text("Dropped on!")
});
})
</script>
</body>
</html>