Skip to content

Instantly share code, notes, and snippets.

@bigopon
Last active December 23, 2016 16:13
Show Gist options
  • Save bigopon/e99b61794bf8c32126e582dae37264fb to your computer and use it in GitHub Desktop.
Save bigopon/e99b61794bf8c32126e582dae37264fb to your computer and use it in GitHub Desktop.
html 5 Drag drop aurelia
<template>
<require from='./self'></require>
<style>
.panel {
user-select: none;
}
.panel header {
padding: 5px;
height: 50px; background: green; color: #fff;
}
.panel .body {
height: 400px; background: #ddd;
}
.item {
display: inline-block; width: 50px; height: 50px; margin: 5px;
background: lightblue; cursor: pointer;
}
.item:hover {
background: blue;
}
.no-event * {
pointer-events: none
}
</style>
<div class='item' draggable='true'></div>
<div class='panel'>
<header dragenter.delegate='enter($event)' dragleave.delegate='leave($event) & self'>
<button>Only clickable when not dragging to my parent element</button>
</header>
</div>
<hr/>
</template>
import {bindable} from 'aurelia-framework';
export class App {
leave(e) {
e.target.classList.remove('no-event')
console.log('Leaving:', e.target.tagName.toLowerCase())
}
enter(e) {
e.target.classList.add('no-event')
console.log('Entering:', e.target.localName)
}
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
import { bindingBehavior } from 'aurelia-framework';
function findOriginalEventTarget(event) {
return (event.path && event.path[0]) || (event.deepPath && event.deepPath[0]) || event.target;
}
function handleSelfEvent(event) {
let target = findOriginalEventTarget(event);
if (this.target !== target) return;
this.selfEventCallSource(event);
}
@bindingBehavior('self')
export class Self {
bind(binding, source) {
if (!binding.callSource || !binding.targetEvent) throw new Error('Self binding behavior only supports event.');
binding.selfEventCallSource = binding.callSource;
binding.callSource = handleSelfEvent;
}
unbind(binding, source) {
binding.callSource = binding.selfEventCallSource;
binding.selfEventCallSource = null;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment