移动友好的拖放与自动对齐

Question

我是一名语言老师，我正在为学生提供一个主要用于移动设备使用的电子学习平台。 我现在正在创建一个空缺填充任务，我的学习者应将列表中的单词放在这样一个空白段落中 到目前为止，我已经能够做到这一点。

https://www.felix-riesterer.de/main/seiten/quizze_en.html#gapfill

     <div id="items">
     <span class="elements">element1</span>
     <span class="elements">element2</span>
     <span class="elements">element3</span>
     <span class="elements">element4</span>
     <span class="elements">element5</span>
     <span class="elements">element6</span>
     <span class="elements">element7</span>
     </div>


     <div id="paragraph">
     <p>If you<span id="1" class="target">.................</span> only                   wanted the <span id="2" class="target">.................</span>  
     click event on certain<span id="3" class="target">.................</span> elements, the <span id="4" class="target">.................</span>
     best is to add a <span id="5" class="target">.................</span>class, and select the correct ones based on that.
     </p>
     </div>


     <div id="hiddeninputs">
     target1: <input type="text" name="targets" class="1"><br>
     target2: <input type="text" name="targets" class="2"><br>
     target3: <input type="text" name="targets" class="3"><br>
     target4: <input type="text" name="targets" class="4"><br>
     target5: <input type="text" name="targets" class="5"><br>
     </div>

用户应在此处点击要移动的项目，然后点击目标。

我现在需要的是以下内容：

1-将元素放置在空白中之后，如果学习者点击另一个空白，如何防止其再次放置在另一个空白中？

2-如果学习者想删除答案，如何采取相反的行动？

3-如何使已经不再使用的单词不再可用，即，如果用户点击使用过的单词，他应该会看到警报？

在此先感谢您的帮助。 请注意，我不是开发人员，我是一位很喜欢开发的简单英语老师。