Question

我确信这是一个简单的问题，但我对使用jquery很新，所以请原谅。

我正在尝试编写一个函数，它将“处理”5个随机选择的图像，并允许将其中3个（用户选择的）放入div中。

我已经设置了一个数组来处理图像的随机化，并找出了如何使div可以删除。我的第一个问题是只有第一张“处理”的图像是可拖动的。在我看来，我在function dealCard() ...

中有一个逻辑错误

function dealCard(i) {
    if (numberOfCardsInDeck == 0) return false;

    var img = document.createElement("img");
    img.src = "http://debsiepalmer.com/images/companions/" + cardsInDeck[i] + ".jpg";
    img.id = "drag"
    document.body.appendChild(img);
    $('#drag').draggable();
    removeCard(i);
}

function removeCard(c)
{

    for (j=c; j <= numberOfCardsInDeck - 2; j++)
    {
        cardsInDeck[j] = cardsInDeck[j+1];
    }
    numberOfCardsInDeck--;
    numberOfCardsInDeck--;
    numberOfCardsInDeck--;
}

...对于我的生活，我无法弄清楚为什么它不会将draggable属性重新分配给其他图像。有人能指出我正确的方向吗？

我的小提琴是：http://jsfiddle.net/LEHbc/22/

Answer 1

您正在使用元素ID来使元素可拖动。添加第二个元素后，有多个id =“drag”的元素，因此draggable仅应用于DOM中遇到的第一个元素。在这种情况下使用类更可取。

Answer 2

使用更多jquery的功能来帮助你，并且喜欢@Kazimeiras说class属性而不是id。

function dealCard(i) {
    if (numberOfCardsInDeck == 0) return false;
    var $img = $("<img src='http://debsiepalmer.com/images/companions/" + cardsInDeck[i] + ".jpg' class='drag' />");
    $("body").append($img);
    $('.drag').draggable();
    removeCard(i);
}

更新了小提琴：http://jsfiddle.net/LEHbc/23/

如何为所有实例分配可拖动属性

2 个答案: