ractive-drag-events
Version:
HTML5 drag/drop proxy events for a Ractive element
112 lines (88 loc) • 2.07 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<style type="text/css">
[draggable] {
border: 1px solid #BBB;
width: 100px;
margin: 5px;
padding: 5px;
text-align: center;
}
[draggable=true] {
background-color:#DDD;
cursor: move;
}
.code {
font-family: monospace;
}
</style>
</head>
<body>
<!-- ractive container element -->
Drag item A to item C...
<br><br>
<div id="container"></div>
<br><br>
To make B draggable, open the console and type:
<br>
<span class="code">ractive.set('items.1.draggable', true)</span>
<!-- includes -->
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
<script src="../ractive-drag-events.js"></script>
<!-- ractive template -->
<script id="template" type="text/x-template">
<div>
{{#each items:i}}
<div on-dragndrop="dragndrop" draggable="{{this.draggable}}">
{{this.name}}
</div>
{{/each}}
</div>
</script>
<script type="text/javascript">
// set up the data
function Item(name, draggable) {
this.name = name
this.draggable = draggable
}
var items = [
new Item('Item A', true),
new Item('Item B', false),
new Item('Item C', true),
]
// set up the ractive instance
var ractive = new Ractive({
el: '#container',
template: '#template',
data: {
items: items
}
})
window.ractive = ractive
// event handler
var startPath = ''
ractive.on('dragndrop', function(event) {
// Firefox doesn't let drags happen unless data gets set
if (event.type == 'start') {
event.original.dataTransfer.setData('text/plain', 'Fnord!')
}
// sample code to only allow dragging item A to item C
if (event.type=='start') {
startPath = event.keypath
}
if (event.type=='enter' || event.type=='over') {
if (startPath=='items.0' && event.keypath=='items.2') {
// preventing default signals a drop is valid
event.original.preventDefault()
}
}
if (event.type=='drop') {
alert('Dragged item A to C!')
}
})
</script>
</body>
</html>