Div back to original start position

[Nadiaw]

Hi,

Amazing job on the interact.js!
Truly enjoying it :)

I have the following question:
How do you make a div (animated) back to it's original position when it's not dropped into a dropzone?
And how do you define it's position?

I used the drag/drop script from the original interact.js website.

Here is a link http://www.nadiaweijers.nl/Interact.js/

[taye]

Duplicate of #79, #224

[Nadiaw]

@taye

Hi, thanks for the fast answer. :)

I have another question is it possible, when 2 dropzones with 2 different classes are right to each other, that there will appear a pop-up?

I hope to hear from you soon!
Many thanks!

[taye]

I don't understand what you mean. Could you explain again perhaps with code samples or a quick diagram?

[Nadiaw]

I've made a quick diagram in Photoshop.
What I'm trying to complete is, when all drag elements got in their right dropzones. There will appear a pop-up. When someone drags it in the wrong dropzone, it snaps back to it's original position.

The snap position works. (something like this http://jsfiddle.net/j9Ump/67/)

This is my script

var startPos = null;

interact('.block')
    .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');
                alert("I am an alert box!");




            textEl && (textEl.textContent =
                'moved a distance of '
                + (Math.sqrt(event.dx * event.dx +
                             event.dy * event.dy)|0) + 'px');
        }
    })
    .inertia(true)
    .restrict({
        drag: "",
        endOnly: true,
        elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    })
    .snap({
        mode: 'anchor',
        anchors: [],
        range: Infinity,
        elementOrigin: { x: 0.5, y: 0.5 },
        endOnly: true
    })
    .on('dragstart', function (event) {
        if (!startPos) {
          var rect = interact.getElementRect(event.target);

          // record center point when starting the very first a drag
          startPos = {
            x: rect.left + rect.width  / 2,
            y: rect.top  + rect.height / 2
          }
        }

        // snap to the start position
        event.interactable.snap({ anchors: [startPos] });
    });


interact('.dropzone')
    // enable draggables to be dropped into this
    .dropzone({ overlap: 'center' })
    // only accept elements matching this CSS selector
    .accept('.block')
    // listen for drop related events
    .on('dragenter', function (event) {
        var dropRect = interact.getElementRect(event.target),
            dropCenter = {
              x: dropRect.left + dropRect.width  / 2,
              y: dropRect.top  + dropRect.height / 2
            };

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



        var draggableElement = event.relatedTarget,
            dropzoneElement = event.target;

        // feedback the possibility of a drop
        dropzoneElement.classList.add('drop-target');
        draggableElement.classList.add('can-drop');
    })
    .on('dragleave', function (event) {
        event.draggable.snap(false);

        // when leaving a dropzone, snap to the start position
        event.draggable.snap({ anchors: [startPos] });

        // remove the drop feedback style
        event.target.classList.remove('drop-target');
        event.relatedTarget.classList.remove('can-drop');
    })
    .on('dropactivate', function (event) {
        // add active dropzone feedback
        event.target.classList.add('drop-active');
    })
    .on('dropdeactivate', function (event) {
        // remove active dropzone feedback
        event.target.classList.remove('drop-active');
        event.target.classList.remove('drop-target');
    })
    .on('drop', function (event) {
        event.relatedTarget.textContent = 'syaay';
    });

[taye]

One way you could do this is to increment a counter every time an item is dropped into the correct slot such that if incrementing the counter makes it equal to the total number of slots, you know that all the items were dropped in the correct places.