Wie feuere ich interact.js event/stelle alle ziehbaren Objekte auf den Standard-Punkt zurück (x: 0, y: 0)

Question

Wie der Titel sagt, suche ich nach einem Onmove- oder Dragmove-Ereignis, um es wiederherzustellen ziehbare div Position zu x: 0 y: 0.

Ich habe einige Probleme/Hilfethemen hier und auf interact.js Hauptseite gesehen, aber scheint nicht die richtige Lösung dafür zu bekommen.

Ich entweder feuern ein Ereignis und ändern Koordinaten zu x: 0 und y = 0 oder ich irgendwie manuell alle ziehbaren.

Jede Hilfe wird geschätzt.

Mein 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 && (
     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 < 21 ; i++) 
    { 
    // loop through all of the elements and restore their positions to default (x : 0 , y : 0) 
    } 

} 

UPDATE:

JAVASCRIPT

// 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 && (
     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 <= 21;i++) 
     nuotrauku_src_id.push("#yes-drop"+i); 


    for (i = 0; i < 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 < nuotraukos_src.length;i++) 
    { 
     if (nuotraukos_src[i].indexOf("ww1") > -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 < 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 < 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 < 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 ]); 

HTML:

<div id = "game_arena_ism"> 
     <div id = "outer_ww1" class="dropzone"> // arena 1 
      <font class = "dropzone_name1" style=""></font> 
     </div>  

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

      <div id="yes-drop15" class="draggable drag-drop nuotrauka_ismincius_14"> </div>      
      <div id="yes-drop16" class="draggable drag-drop nuotrauka_ismincius_15"> </div>      
      <div id="yes-drop17" class="draggable drag-drop nuotrauka_ismincius_16"> </div>      
      <div id="yes-drop18" class="draggable drag-drop nuotrauka_ismincius_17"> </div>      
      <div id="yes-drop19" class="draggable drag-drop nuotrauka_ismincius_18"> </div> 

      <div id="yes-drop20" class="draggable drag-drop nuotrauka_ismincius_19"></div>      
      <div id="yes-drop21" class="draggable drag-drop nuotrauka_ismincius_20"> </div>      



     <div id = "outer_ww2" class="dropzone2"> 
      <font class = "dropzone_name2" style=""></font> // arena 2 
     </div> 

    </div> 

Answer 1

Ich löste es mit dem Entfernen aller Draggables und ziehen Bereiche mit $ (Element) .remove() und dann anhängen sie wieder mit $ (elementdiv) .append(). Erforderlich, um den Rand anzupassen, um das Standardergebnis zu erhalten, war es $ (ziehbares Element) .css ("Rand", "0px 2px 0px 2px");

Answer 2

So gehen durch alle Objekte, die Sie ziehen wollen und Verwenden Sie nur mit Interaktion js geben Sie ihnen einen zusätzlichen Klassennamen.
Fügen Sie die "drag_class" oder was auch immer Sie wollen, um es zu benennen.

<div id="foo" class="foo drag_class"> </div> 

Verwenden jQuery durch alle von ihnen gehen in etwa so:

$('.drag_class').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 = document.getElementById(current_id); //Gets the DOM Object (Which is what 'target' is) 
    drag_object.style.webkitTransform = drag_object.style.transform = 
    'translate(' + 0 + 'px, ' + 0 + 'px)'; 
} 

Verwenden Sie diesen Code, wenn Sie alle Elemente auslösen soll auf 0,0 gehen.

Entschuldigung, ich habe momentan keine Zeit diesen Code zu testen. Wenn es ein Problem damit gibt, lass es mich wissen. Hoffe, es hilft :)