Question

我找到了一个创建拖放功能的代码，我想对其进行修改，但实际上不知道如何进行。我有四个单词可以拖到另一个格中。

问题：我可以将所有4个单词拖到一个div中，而每个div框只需要拖一个单词。

我还想为每个div框拖动一个特定的单词。假设在框＃box1上，我只想拖动单词，不允许拖动letter2，letter3等。

HTML

    <p class="amaiaFrase">Amaia &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ibili da</p>
    <div id="amaiaCajaPalabra" class="amaiaCajaPalabra" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <p class="ibaiFrase">Ibai &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ibili da</p>
    <div id="ibaiCajaPalabra" class="ibaiCajaPalabra" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="contenedorPalabras">
    <span id="word1" draggable="true" ondragstart="drag(event)">puzgarrietan</span>
    <span id="word2" draggable="true" ondragstart="drag(event)">sokatiran</span>
    <span id="word3" draggable="true" ondragstart="drag(event)">dantzan</span>
    <span id="word4" draggable="true" ondragstart="drag(event)">sokasaltoan</span>
    </div>

JAVASCRIPT

function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

现在我没有任何问题，只是想了解如何限制每个盒子中的单词以及将特定单词拖动到特定盒子中？

仅限制单词列表中1个特定单词的拖放

0 个答案: