title: How do I fire interact.js event / restore all draggables to the default spot ( x : 0 , y : 0 )
body: <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>