получить объект взаимодействия. js из динамически создаваемых зон - PullRequest
Новая
       17

получить объект взаимодействия. js из динамически создаваемых зон

0 голосов
/ 22 апреля 2020

Я использую интерактив. js и хотел бы узнать информацию о нескольких динамически добавляемых зонах. На данный момент я могу получить информацию об элементах, которые я перетаскиваю, благодаря событиям, но пока я не перетаскиваю их, у меня нет доступа к «интерактивным Js» объектам зоны. Однако он наверняка где-то существует ...
есть ли способ вернуть его?

Я прилагаю очень глупый пример того, как я хотел бы получить. А именно, получить информацию о моих зонах, нажав кнопку.

html

<div class="area"></div>
<button id='add'>add zone</button>
<button id='get'>get zone infos</button>

css

.area{
  width:650px;
  height: 350px;
  background-color: grey;
  border:1px solid #999;
  position: relative;
}

.draggable{
  position absolute;
  left: 0 ;
  top: 0;
  height: 50px;
  width: 50px;
  background-color: green;
  border:1px solid white;
}

Js

var inter;

$(function(){

  $('#add').on('click',addZone);
  $('#get').on('click',getZonesInfos);

  infos = interact('.draggable')
  .draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    autoScroll: true,

    listeners: {
      move: dragMoveListener,
      end: function(event){
        console.log(event);
      }   
    }
  })
})

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

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

function addZone(){
  $('<div class="draggable"></div>').appendTo('.area');
}

function getZonesInfos(){
  console.log(infos);
}

проверка кода взаимодействия взаимодействует Js

...