опция «accept» не работает в aurelia-interactivejs

Question

Я тестирую плагин aurelia-interactivejs с разделом перетаскивания в interactjs demo code. Все работает отлично, за исключением опции «принять» в целевых областях. Цели принимают как перетаскиваемые источники, а не только те, у которых есть идентификатор «да-капля». Другими словами, цели «внутренняя-dropzone» и «наружная-dropzone» принимают падение источника «без капли», даже если опции drop указывают accept: '#yes-drop'.

Вот код:

перетащить и 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> 

перетащить и drop.js (dropOptions определяется в конце)

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' 
    }; 
} 

Я добавил заявление debugger в функции InteractDraggableCustomAttribute.prototype.attached внутри aurelia- код взаимодействия и проверяется this.options. Он не определен, хотя параметры явно установлены с interact-draggable.bind.

Answer 1

Версия 1.0.10 aurelia-interactivejs исправляет эту проблему.