Javascript 使用Interact.js捕捉到Dropzone

我是InteractionJS的新手，如果在dropzone内拍摄到星星，我会尝试将其放置在树的顶部（参见JSFIDLE）。我该怎么做

Javascript:

interact('.draggable')
    .draggable({
        onmove: function (event) {
            var target = event.target,
                x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
                y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

            target.style.webkitTransform =
            target.style.transform =
                'translate(' + x + 'px, ' + y + 'px)';

            target.setAttribute('data-x', x);
            target.setAttribute('data-y', y);
        },
        onend: function (event) {
            var textEl = event.target.querySelector('p');

            textEl && (textEl.textContent =
                'moved a distance of '
                + (Math.sqrt(event.dx * event.dx +
                             event.dy * event.dy)|0) + 'px');
        }
    })
    .inertia(true)
    .restrict({
        drag: "parent",
        endOnly: true,
        elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    });



// enable draggables to be dropped into this
interact('.tree').dropzone({
    // only accept elements matching this CSS selector
    accept: '#star',
    // Require a 75% element overlap for a drop to be possible
    overlap: 0.75,

    // listen for drop related events:

    ondropactivate: function (event) {
        // add active dropzone feedback
        event.target.classList.add('drop-active');
    },
    ondragenter: function (event) {
        var draggableElement = event.relatedTarget,
            dropzoneElement = event.target;

        // feedback the possibility of a drop
        dropzoneElement.classList.add('drop-target');
        draggableElement.classList.add('can-drop');
        $('.tree:not(.drop-target)').find('img').animate({
            opacity: .5,
            height: "160px"
            });

    },
    ondragleave: function (event) {
        var draggableElement = event.relatedTarget,
            dropzoneElement = event.target;
        // remove the drop feedback style
        event.target.classList.remove('drop-target');
        event.relatedTarget.classList.remove('can-drop');
        $('.tree:not(.drop-target)').find('img').animate({
            opacity: 1,
            height: "186px"
            });
    },
    ondrop: function (event) {
        //Dropped event
    },
    ondropdeactivate: function (event) {
        // remove active dropzone feedback
        event.target.classList.remove('drop-active');
        event.target.classList.remove('drop-target');
    }
})
 .snap({
  mode: 'anchor',
  grid: { x: 20, y: 20 },
  range: Infinity
});

图书馆：

小提琴：

---

如果仍有人为此而挣扎，这对我来说很好！

小提琴：

---

我唯一搞不清楚的是，如果你在星星很小的时候将它拖到另一棵树上，它就会出现在小树顶上的位置。

上述内容在更新的API中不起作用。我用叉子叉出Taye（interact.js的作者）的一支笔，让它工作起来

在此处查看可能的解决方案：

如果我看得对，就需要在

dragenter

上设置目标，在任何情况下，使用新API的解决方案都比integrator POV要详细得多

event.draggable.draggable({
  snap: {
     targets: [dropCenter]
  }
});

---

它说snap不是一个功能。我认为这个答案不再是最新的。检查@eljefedelrodeljefe提供的答案

event.draggable.draggable({
  snap: {
     targets: [dropCenter]
  }
});