"accept" drop option does not work in aurelia-interactjs - aurelia

Question

I'm testing out the aurelia-interactjs plugin with the Drag and Drop section of the interactjs demo code. Everything is working fine except the "accept" drop option on the target areas. The targets accept both draggable sources instead of just the one with an id of "yes-drop". In other words, the "inner-dropzone" and "outer-dropzone" targets accept a drop of the "no-drop" source even though the drop options specify accept: '#yes-drop'.
Here's the code:
drag-and-drop.html
<template>
<require from="./dragging-only.css"></require>
<require from="./drag-and-drop.css"></require>
<div interact-draggable.bind="dragOptions" interact-dragend.delegate="dragEnd($event)" interact-dragmove.delegate="dragMoveListener($event)" id="no-drop" class="draggable drag-drop"> #no-drop </div>
<div interact-draggable.bind="dragOptions" interact-dragend.delegate="dragEnd($event)" interact-dragmove.delegate="dragMoveListener($event)" id="yes-drop" class="draggable drag-drop"> #yes-drop </div>
<div interact-dropzone.bind="dropOptions" interact-dropactivate.delegate="dropActivate($event)" interact-dragenter.delegate="dragEnter($event)" interact-dragleave.delegate="dragLeave($event)" interact-drop.delegate="drop($event)" interact-dropdeactivate.delegate="dropDeactivate($event)" id="outer-dropzone" class="dropzone">
#outer-dropzone
<div interact-dropzone.bind="dropOptions" interact-dropactivate.delegate="dropActivate($event)" interact-dragenter.delegate="dragEnter($event)" interact-dragleave.delegate="dragLeave($event)" interact-drop.delegate="drop($event)" interact-dropdeactivate.delegate="dropDeactivate($event)" id="inner-dropzone" class="dropzone">#inner-dropzone</div>
</div>
</template>
drag-and-drop.js (dropOptions is defined at the end)
export class DragAndDrop {
dragMoveListener(event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.detail.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.detail.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the position attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
dragEnd(event) {
var textEl = event.target.querySelector('p');
textEl && (textEl.textContent =
'moved a distance of ' +
(Math.sqrt(event.detail.dx * event.detail.dx +
event.detail.dy * event.detail.dy) | 0) + 'px');
}
dropActivate(customEvent) {
let event = customEvent.detail;
// add active dropzone feedback
event.target.classList.add('drop-active');
}
dragEnter(customEvent) {
let event = customEvent.detail;
var draggableElement = event.relatedTarget,
dropzoneElement = event.target;
// feedback the possibility of a drop
dropzoneElement.classList.add('drop-target');
draggableElement.classList.add('can-drop');
draggableElement.textContent = 'Dragged in';
}
dragLeave(customEvent) {
let event = customEvent.detail;
// remove the drop feedback style
event.target.classList.remove('drop-target');
event.relatedTarget.classList.remove('can-drop');
event.relatedTarget.textContent = 'Dragged out';
}
drop(customEvent) {
let event = customEvent.detail;
event.relatedTarget.textContent = 'Dropped';
}
dropDeactivate(customEvent) {
let event = customEvent.detail;
// remove active dropzone feedback
event.target.classList.remove('drop-active');
event.target.classList.remove('drop-target');
}
dragOptions = {
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: {
top: 0,
left: 0,
bottom: 1,
right: 1
}
},
// enable autoScroll
autoScroll: true,
};
dropOptions = {
// only accept elements matching this CSS selector
accept: '#yes-drop',
// Require a 75% element overlap for a drop to be possible
overlap: '0.75'
};
}
I added a debugger statement in the InteractDraggableCustomAttribute.prototype.attached function within the aurelia-interactjs code and inspected this.options. It is undefined even though the options are clearly set with interact-draggable.bind.

Answer 1

Version 1.0.10 of aurelia-interactjs fixes this issue.