Выбранный и невыбранный div с interactive.js - PullRequest
Новая
       11

Выбранный и невыбранный div с interactive.js

0 голосов
/ 09 апреля 2019

Я использую для проекта interactive.js и хочу создать перетаскиваемый div, который можно перетаскивать, когда он не выбран, потому что я хочу вставить текстовую область внутри div, и если div выбран, я могувведите.

Поэтому мне нужно 2 состояния: выбрано и не выбрано, поскольку страница будет состоять из нескольких элементов Div. Это возможно?

Я не нашел результатов в Интернете 

interact('.draggable')
.draggable({
    // enable inertial throwing
    inertia: true,

    targets: [
        { x: 200, y: 200 },
        { x: 250, y: 350 }
    ],

    // keep the element within the area of it's parent
    modifiers: [
        interact.modifiers.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,
});

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;

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

window.dragMoveListener = dragMoveListener;
#drag {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #29e;
  color: white;
  border-radius: 0.75em;
  user-select: none;
  touch-action: none;
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}
<script src="https://unpkg.com/interactjs@next/dist/interact.min.js"></script>

<div id="drag" class="draggable"></div>
...