I am new to interactjs and I am trying to make the star drop on top of the tree (see jsfiddle) if it is snapped inside the dropzone. How would I do this?

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

Library: /

Fiddle: /

I am new to interactjs and I am trying to make the star drop on top of the tree (see jsfiddle) if it is snapped inside the dropzone. How would I do this?

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

Library: http://interactjs.io/

Fiddle: http://jsfiddle/hpq7rpnh/2/

• javascript
• jquery
• css

2 Answers 2

The above won't work with the updated API. I forked a pen of Taye (the author of interact.js) and made it working.

See a possible solution here:https://codepen.io/eljefedelrodeodeljefe/pen/vybegM

if I see this right, one needs to set the target on dragenter, in any case the solution with the new API is, imo, much more verbose from an integrator POV.

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

If there are still people struggling with this, this worked well for me! https://github./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)

Fiddle: http://jsfiddle/hpq7rpnh/3/

The only thing I couldn't figure out is that the star gets on the small tree top position if you drag it to another tree while it's small.