Question

我不熟悉interactjs，我试图让它在树顶上掉落（参见jsfiddle），如果它在dropzone内部被捕获的话。我该怎么做？

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

库： http://interactjs.io/

小提琴： http://jsfiddle.net/hpq7rpnh/2/

Answer 1

以上内容不适用于更新的API。我挑了一支Taye笔（interact.js的作者）并使它工作。

请在此处查看可能的解决方案：https://codepen.io/eljefedelrodeodeljefe/pen/vybegM

如果我认为这是正确的，则需要在dragenter上设置目标，无论如何，使用新API的解决方案是imo，来自集成商POV更加详细。

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

Answer 2

如果还有人在为此苦苦挣扎，这对我来说效果很好！ https://github.com/taye/interact.js/issues/79

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)

小提琴： http://jsfiddle.net/hpq7rpnh/3/

我唯一想不到的是，如果你将它拖到另一棵树上，那么它就会在小树顶位置上移动。

使用Interact.js捕捉Dropzone

2 个答案: