使用interact.js的选定和未选定的div

Question

我正在为项目使用interact.js，我想创建一个可拖动的div，当未选中时可以拖动它，因为我想在div内插入一个文本区域，如果选择了div，我可以输入。

因此，我需要2种状态：selected和unselected，因为页面将由几个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>