对象捕捉到旧的顶部（InteractJs）

Question

我正在使用InteractJs，我几乎可以使用它，但是当我将星星放在一棵小树上，然后它就会变成小树的顶部。

因此，当您在树上拖动星星时，其他树木会变小。当你将它拖到另一棵树上时，树木会再次达到正常高度，但是星星会到达以前的小树高的顶部。

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

interact('.draggable').snap({
      mode: 'anchor',
      anchors: [],
      range: Infinity,
      elementOrigin: { x: 0.5, y: 2 },
      endOnly: true
});

// 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
        clearInterval(interval); // stop star rotation
        dropzoneElement.classList.add('drop-target');
        draggableElement.classList.add('can-drop');
        $('.tree:not(.drop-target)').find('img').animate({
            opacity: .5,
            height: "160px"
            });
        var dropRect = interact.getElementRect(event.target),
            dropCenter = {
              x: dropRect.left + dropRect.width  / 2,
              y: dropRect.top  + dropRect.height / 2
            };

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

    },
    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"
            });

        event.draggable.snap(false);
    },
    ondrop: function (event) {
        //Dropped event
    },
    ondropdeactivate: function (event) {
        // remove active dropzone feedback
        event.target.classList.remove('drop-active');
        event.target.classList.remove('drop-target');
    }
})

//Start star rotation
var angle = 0;
var interval = setInterval(function(){
    angle+=1;
    $("#star img").rotate(angle);
},50)

jsfiddle：http://jsfiddle.net/hpq7rpnh/4/

图书馆：http://interactjs.io/