Question

我正在使用interactjs demo code的拖放部分测试aurelia-interactjs插件。一切都很好，除了＆＃34;接受＆＃34;目标区域的下拉选项。目标接受两个可拖动的源，而不仅仅是id为＃34; yes-drop＆＃34;的目标。换句话说，＆＃34;内部掉落区＆＃34;和＆＃34;外降区＆＃34;目标接受一滴＆＃34; no-drop＆＃34;即使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>

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-interactjs代码中的debugger函数中添加了InteractDraggableCustomAttribute.prototype.attached语句并检查了this.options。即使使用interact-draggable.bind明确设置了选项，也未定义。

Answer 1

aurelia-interactjs的1.0.10版解决了这个问题。

＆＃34;接受＆＃34; drop选项在aurelia-interactjs中不起作用

1 个答案: