如何触发 interact.js 事件/将所有可拖动对象恢复到默认位置（x：0，y：0）

Question

正如标题所说，我正在寻找如何触发移动或拖动移动事件，以便将可拖动的 div 位置恢复到 x:0 y: 0。

我在这里和 interact.js 主页上看到了一些问题/帮助主题，但似乎无法找到正确的解决方案。

我要么触发一个事件并将坐标更改为 x : 0 和 y = 0，要么我以某种方式手动获取所有可拖动对象。

感谢任何帮助。

我的代码：

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

}

更新：

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

因此，要遍历所有要拖动并与 interact js 一起使用的对象，只需给它们一个额外的 class 名称即可。
添加 "drag_class" 或任何您想命名的名称。

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

使用 jQuery 像这样浏览所有这些：

$('.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)';
}

只要你想触发所有元素去 0,0 就使用这个代码。

抱歉，我现在没有时间测试这段代码。如果有任何问题，请告诉我。希望对您有所帮助:)

Answer 2

我通过删除所有可拖动对象和拖动区域解决了这个问题 $(element).remove() 然后用 $(elementdiv).append() 再次附加它们。需要调整保证金以获得默认结果，它是 $(可拖动元素).css("margin","0px 2px 0px 2px");

如何触发 interact.js 事件/将所有可拖动对象恢复到默认位置（x：0，y：0）

How do I fire interact.js event / restore all draggables to the default spot ( x : 0 , y : 0 )

javascript

jquery

interact.js