Как создать вопрос анкеты с перетаскиванием ответов?

Question

[Роман]

Есть анкета в которую захотелось впихнуть вопрос по типу:
Есть набор слов "Дорога, поезд, Машина"
и внизу предложение в которое нужно вставить эти слова. Допустим ****** мокрая, ****** плохо тормозит и не замечает ******.
Так понимаю копать нужно в сторону jquery sortable или просто draggable
Но не выходит подружить разные объекты

<div class="quest__gaps quest__gaps_connect">
                            <div class="quest__gaps_gap">Машина</div>
                            <div class="quest__gaps_gap">Дорога</div>
                            <div class="quest__gaps_gap">Поезд</div>
                        </div>
                        <p class="quest__gaps_text"> <span class="quest__gaps_target quest__gaps_connect"></span> мокрая, <span class="quest__gaps_target quest__gaps_connect"></span> плохо тормозит и не замечает <span class="quest__gaps_target quest__gaps_connect"></span></p>

Заранее спасибо за подсказку

Comments

[Вадим]

Но не выходит подружить разные объекты

Начало не плохое. Осталось рассказать и показать что именно не выходит.
В идеале с примером на codepen.

[Сергей Сергей]

https://developer.mozilla.org/ru/docs/Web/API/HTML...

[Роман]

Вадим, написал решение на js чистом. Начинал с библиотеки jquery'вской и теперь дело принципа понять почему эта шутка не работала) Сейчас закину на код пен

[Роман]

Вадим, https://codepen.io/AbsZero/pen/VwXrwLK
В общем хоть убейте не могу понять принцип связывания, что у sortable, draggable. В примере у sortable было два списка с разными идами и они были связаны по классу. Здесь пробовал аналогично дать всем контейнерам класс общий и связать по нему "quest__gaps_connect". Ну тогда возникает проблема с тем, что как-то ограничить нужно максимальное кол-во. 1 квадрат на 1 слово. Да и опять же если несколько таких вопросов на странице будет, то все это между собой же сможет взаимодействовать. Каждый раз писать разные классы как-то не очень.

[Сергей Сергей]

let ddd;
document.querySelectorAll( '.quest__gaps_gap' ).forEach( d => {
  d.draggable = true;
  d.ondragstart = e => ddd = e.target;
} );
document.querySelectorAll( '.quest__gaps_target' ).forEach( s => {
  s.ondragover = e => {
    e.preventDefault();
  }
  s.ondrop = e => {
    const s = e.target;
    if( s.tagName !== 'SPAN' ) return;
    e.preventDefault();
    s.appendChild( ddd );
  }
} );