（jQuery 插件）在多项选择测验中拖放答案

我正在制作一个网页，用户必须在测验中连接两个列表中的元素。例如，假设有一个测验问题，其中有两个列表，一个包含国家/地区，另一个包含首都，用户必须将首都连接到正确的国家/地区。

优选地，应该有一种方式让用户将元素从第二列表拖到第一列表的元素旁边的区域。像这样：

在这里，您可以将蓝色框拖到灰色矩形中。

是否有 jQuery 插件或其他 JavaScript 库可以执行类似的操作？还是我必须自己实施？如果是这样，是否有人有一些描述类似问题解决方案的文章，或者关于如何最好地解决这个问题的想法？

您可以使用 Jquery-UI，请参阅此小提琴：

https://jsfiddle.net/esedic/xg9f3hhy/ https://jsfiddle.net/esedic/xg9f3hhy/

HTML:

<h3>Treatment Areas</h3>
<div class="container">
  <div data-value="1" class="draggable">
    <p>Back</p>
  </div>
  <div data-value="1" class="droppable">
    <div class="droparea"></div>
    <p>Area 1</p>
  </div>
</div>
<div class="container">
  <div data-value="2" class="draggable">
    <p>Adomen</p>
  </div>
  <div data-value="2" class="droppable">
    <div class="droparea"></div>
    <p>Area 2</p>
  </div>
</div>
<div class="container">
  <div data-value="3" class="draggable">
    <p>Chest</p>
  </div>
  <div data-value="3" class="droppable">
    <div class="droparea"></div>
    <p>Area 3</p>
  </div>
</div>

Jquery:

$('.draggable').draggable({

  //cursor: 'move'
});
$('.droppable').droppable({
  drop: function(event, ui) {
    $(this).addClass('ui-state-highlight');
    ui.draggable.position({
      of: $(this),
      my: 'left top',
      at: 'left+6 top+6'
    });
    $('.draggable').each(function(i) { 
      $(this).data('value', i+1); 
    }).filter(':first').trigger('listData');
  }
});

$('.draggable').on('listData', function() {
  $('.droppable').each(function() {
    console.log( $(this).text() + ' - ' + $(this).data('value') ); 
  });
});

SCSS:

body {
    padding: 1em;
}

.draggable {
    width: 100px;
    padding: 5px;
    float: left;
    margin: 10px 10px 10px 0;
    background: red;
    color: #fff;
    cursor: move;

      p {
      margin: 2px 0;
  }
}

.droppable {
    width: 300px;
    padding: 5px 10px 5px 5px;
    float: right;
    margin: 10px;
    border: 1px solid #ddd;

    p {
      float: right;
      width: 50px;
      height: 30px;
      padding: 5px 5px 0 0;
      text-align: center;
      margin: 0;
  }
}

.container {
    clear: both;
    margin: 10px;
    width: 100%;
}

.droparea {
    float: left;
    border: 1px dashed red;
    width: 108px;
    height: 30px;
}