“接受”选项在aurelia-interactjs中无效。

Question

我正在用interactjs演示代码的拖放部分测试aurelia插件。除了目标区域的“接受”选项之外，一切正常。目标接受两个可拖放的源，而不是只接受id为"yes-drop“的源。换句话说，尽管drop选项指定了accept: '#yes-drop'，但“内-下拉”和“外部-下拉”目标接受“无拖放”源的下降。

下面是代码：

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在末尾定义)

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

我在aurelia代码中的InteractDraggableCustomAttribute.prototype.attached函数中添加了一个InteractDraggableCustomAttribute.prototype.attached语句，并检查了this.options。它是未定义的，即使选项是用interact-draggable.bind明确设置的。

Answer 1

版本1.0.10的修复了这个问题。