How do I fire interact.js event / restore all draggables to the default spot ( x : 0 , y : 0 )
<p>As the title says I'm looking for how to fire an onmove or drag move event in order to restore draggable div position to x:0 y: 0. </p>

<p>I've seen some issues / help topics here and on interact.js main page , but cant seem to get the right solution to this.</p>

<p>I either fire an event and change coordinates to x : 0 and y = 0 or I somehow manually get all of the draggables.</p>

<p>Any help is appreciated.</p>

<p>My code:</p>

<pre><code>// target elements with the "draggable" class
interact('.draggable')
  .draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    },
    // enable autoScroll
    autoScroll: true,

    // call this function on every dragmove event
    onmove: dragMoveListener,
    // call this function on every dragend event
    onend: function (event) {
      var textEl = event.target.querySelector('p');

      textEl &amp;&amp; (
         textEl.textContent = 'moved a distance of ' + (Math.sqrt(event.dx * event.dx + event.dy * event.dy)|0) + 'px');


    }


  });

  function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

      x= 0;
      y = 0;



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

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }

  // this is used later in the resizing and gesture demos
  window.dragMoveListener = dragMoveListener;





interact('#dropzone1').dropzone({ // enable draggables to be dropped into this

  accept: '.dropzone1accept', // only accept elements matching this CSS selector

  overlap: 0.75, // Require a 75% element overlap for a drop to be possible

  ondropactivate: function (event) { // add active dropzone feedback

  },
  ondragenter: function (event) {  // feedback the possibility of a drop
    var draggableElement = event.relatedTarget,
        dropzoneElement = event.target;
  },
  ondragleave: function (event) {  // remove the drop feedback style

    var str = event.relatedTarget.id;
    var str1 = str.split("yes-drop").pop();
    skaicius_ism =  parseInt(str1);
    skaicius_ism--;

    busenos[skaicius_ism] = 0;
  },
  ondrop: function (event) {

    var str = event.relatedTarget.id;
    var str1 = str.split("yes-drop").pop();
    skaicius_ism =  parseInt(str1);
    skaicius_ism--;

    busenos[skaicius_ism] = 1;  
  },
  ondropdeactivate: function (event) { 
  // remove active dropzone feedback 
  }
});

interact('#dropzone2').dropzone({

  accept: '.dropzone2accept',

  overlap: 0.75,

  ondropactivate: function (event) {  },
  ondragenter: function (event) {
    var draggableElement = event.relatedTarget,
        dropzoneElement = event.target;

  },
  ondragleave: function (event) {

    var str = event.relatedTarget.id;
    var str1 = str.split("yes-drop").pop();
    skaicius_ism =  parseInt(str1);
    skaicius_ism--;

    busenos[skaicius_ism] = 0;
  },
  ondrop: function (event) {

    var str = event.relatedTarget.id;
    var str1 = str.split("yes-drop").pop();
    skaicius_ism =  parseInt(str1);
    skaicius_ism--;

    busenos[skaicius_ism] = 1;
  },
  ondropdeactivate: function (event) {}
});


function atstatyti()
{
    for ( i = 0; i &lt; 21 ; i++ )
    {
    // loop through all of the elements and restore their positions to default ( x : 0 , y : 0 )
    }

}
</code></pre>

<p>UPDATE:</p>

<p>JAVASCRIPT</p>

<pre><code>// target elements with the "draggable" class
interact('.draggable')
  .draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    },
    // enable autoScroll
    autoScroll: true,

    // call this function on every dragmove event
    onmove: dragMoveListener,
    // call this function on every dragend event
    onend: function (event) {
      var textEl = event.target.querySelector('p');

      textEl &amp;&amp; (
         textEl.textContent = 'moved a distance of ' + (Math.sqrt(event.dx * event.dx + event.dy * event.dy)|0) + 'px');


    }


  });

  function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;



        x = 0;
        if ( koord == 1 ) 
        {

            y = 0;
            koord = 0;
        }

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

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }

  // this is used later in the resizing and gesture demos
  window.dragMoveListener = dragMoveListener;





interact('#outer_ww1').dropzone({ // enable draggables to be dropped into this

  accept: '.ww1found', // only accept elements matching this CSS selector

  overlap: 0.75, // Require a 75% element overlap for a drop to be possible

  ondropactivate: function (event) { // add active dropzone feedback

  },
  ondragenter: function (event) {  // feedback the possibility of a drop
    var draggableElement = event.relatedTarget,
        dropzoneElement = event.target;
  },
  ondragleave: function (event) {  // remove the drop feedback style

    var str = event.relatedTarget.id;
    var str1 = str.split("yes-drop").pop();
    skaicius_ism =  parseInt(str1);
    skaicius_ism--;

    busenos[skaicius_ism] = 0;
  },
  ondrop: function (event) {

    var str = event.relatedTarget.id;
    var str1 = str.split("yes-drop").pop();
    skaicius_ism =  parseInt(str1);
    skaicius_ism--;

    busenos[skaicius_ism] = 1;  
  },
  ondropdeactivate: function (event) { 
  // remove active dropzone feedback 
  }
});

interact('#outer_ww2').dropzone({

  accept: '.ww2found',

  overlap: 0.75,

  ondropactivate: function (event) {  },
  ondragenter: function (event) {
    var draggableElement = event.relatedTarget,
        dropzoneElement = event.target;

  },
  ondragleave: function (event) {

    var str = event.relatedTarget.id;
    var str1 = str.split("yes-drop").pop();
    skaicius_ism =  parseInt(str1);
    skaicius_ism--;

    busenos[skaicius_ism] = 0;
  },
  ondrop: function (event) {

    var str = event.relatedTarget.id;
    var str1 = str.split("yes-drop").pop();
    skaicius_ism =  parseInt(str1);
    skaicius_ism--;

    busenos[skaicius_ism] = 1;
  },
  ondropdeactivate: function (event) {}
});

function uzpildyti_nuotraukas()
{
    var laikinas;

    for ( i = 1; i &lt;= 21;i++ )
        nuotrauku_src_id.push("#yes-drop"+i);


    for ( i = 0; i &lt; 21;i++ )
    {
      var rnd_number = Math.floor((Math.random() * 20) + 0);

      laikinas =  nuotraukos_src[rnd_number];
      nuotraukos_src[rnd_number] =  nuotraukos_src[i];
      nuotraukos_src[i] = laikinas;  

    }

    for ( i = 0; i &lt; nuotraukos_src.length;i++ ) 
    {   
        if ( nuotraukos_src[i].indexOf("ww1") &gt; -1 )    
        $(nuotrauku_src_id[i]).addClass("ww1found");
        else    
        $(nuotrauku_src_id[i]).addClass("ww2found");        

        $(nuotrauku_src_id[i]).css('background-image', 'url(' + nuotraukos_src[i] + ')');

        $(nuotrauku_src_id[i]).css({
            'background-size': '100% 100%' 
        });

    }


}
function rezultatai_ism()
{
    if ( ar_laimeta != 1 )
    {
        var sk = 0;
        for ( i = 0; i &lt; nuotraukos_src.length;i++ )
        {
            if ( busenos[i] == 1 )
                sk++;
        }   

        if ( sk == 21 ) {
        $('#myModal_ism').modal('show');
        ar_laimeta = 1;
        }

        //alert(sk);    
        setTimeout( rezultatai_ism,1000);
    }

}
function atstatyti()
{
    for ( i = 0; i &lt; nuotrauku_src_id.length;i++ ) 
    {   
        if ( $(nuotrauku_src_id[i]).hasClass( "ww1found" ) == true )
        $(nuotrauku_src_id[i]).removeClass( "ww1found" );
        else
        $(nuotrauku_src_id[i]).removeClass( "ww2found" );



    }
    koord = 1;


    for ( i = 0; i &lt; 21;i++ )
    {
        $(nuotrauku_src_id[i]).addClass( "drag-dropas" );   



}
$('.drag-dropas').map(function(){
   //Now you've got a loop that goes through all the elements with drag_class   
   //var current_id = $(this).attr(id);

   var drag_object = $(this)[0]; //Gets the DOM Object (Which is what 'target' is)
   drag_object.style.webkitTransform =  drag_object.style.transform =
   'translate(' + 0 + 'px, ' + 0 + 'px)';
}); // BTW fixed syntax with ]);
</code></pre>

<p>HTML:</p>

<pre><code>  &lt;div id = "game_arena_ism"&gt;   
        &lt;div id = "outer_ww1" class="dropzone"&gt; // arena 1
            &lt;font class = "dropzone_name1" style=""&gt;&lt;/font&gt;
        &lt;/div&gt;      

                // draggable item
            &lt;div id="yes-drop1"  class="draggable drag-drop nuotrauka_ismincius_0"&gt; &lt;/div&gt;
            &lt;div id="yes-drop2" class="draggable drag-drop nuotrauka_ismincius_1"&gt; &lt;/div&gt;
            &lt;div id="yes-drop3" class="draggable drag-drop nuotrauka_ismincius_2"&gt; &lt;/div&gt;
            &lt;div id="yes-drop4" class="draggable drag-drop nuotrauka_ismincius_3"&gt; &lt;/div&gt;               
            &lt;div id="yes-drop5" class="draggable drag-drop nuotrauka_ismincius_4"&gt; &lt;/div&gt;               
            &lt;div id="yes-drop6" class="draggable drag-drop nuotrauka_ismincius_5"&gt; &lt;/div&gt;           
            &lt;div id="yes-drop7" class="draggable drag-drop nuotrauka_ismincius_6"&gt; &lt;/div&gt;               
            &lt;div id="yes-drop8" class="draggable drag-drop nuotrauka_ismincius_7"&gt; &lt;/div&gt;           
            &lt;div id="yes-drop9" class="draggable drag-drop nuotrauka_ismincius_8"&gt; &lt;/div&gt;           
            &lt;div id="yes-drop10" class="draggable drag-drop nuotrauka_ismincius_9"&gt; &lt;/div&gt;                      
            &lt;div id="yes-drop11" class="draggable drag-drop nuotrauka_ismincius_10"&gt; &lt;/div&gt;                     
            &lt;div id="yes-drop12" class="draggable drag-drop nuotrauka_ismincius_11"&gt; &lt;/div&gt;                     
            &lt;div id="yes-drop13" class="draggable drag-drop nuotrauka_ismincius_12"&gt; &lt;/div&gt;                     
            &lt;div id="yes-drop14" class="draggable drag-drop nuotrauka_ismincius_13"&gt; &lt;/div&gt; 

            &lt;div id="yes-drop15" class="draggable drag-drop nuotrauka_ismincius_14"&gt; &lt;/div&gt;                     
            &lt;div id="yes-drop16" class="draggable drag-drop nuotrauka_ismincius_15"&gt; &lt;/div&gt;                     
            &lt;div id="yes-drop17" class="draggable drag-drop nuotrauka_ismincius_16"&gt; &lt;/div&gt;                     
            &lt;div id="yes-drop18" class="draggable drag-drop nuotrauka_ismincius_17"&gt; &lt;/div&gt;                     
            &lt;div id="yes-drop19" class="draggable drag-drop nuotrauka_ismincius_18"&gt; &lt;/div&gt;

            &lt;div id="yes-drop20" class="draggable drag-drop nuotrauka_ismincius_19"&gt;&lt;/div&gt;                      
            &lt;div id="yes-drop21" class="draggable drag-drop nuotrauka_ismincius_20"&gt; &lt;/div&gt;                     



        &lt;div id = "outer_ww2" class="dropzone2"&gt;
            &lt;font class = "dropzone_name2" style=""&gt;&lt;/font&gt; // arena 2
        &lt;/div&gt;  

    &lt;/div&gt;
</code></pre>