无法使可拖动的工作

Question

我在 jsfiddle 上有一个代码，但我无法让它工作，我可以使用除可拖动功能之外的所有功能。当我添加 $(init) 时，发牌按钮停止工作并且我无法让它发牌，一旦我删除 $(init) 它就可以工作但不会拖动。有人可以帮我弄清楚如何进行可拖动的工作吗？谢谢。

我的 JsFiddle： http://jsfiddle.net/otpspbhs/

$('#deal').click(function () {
    dealCard(randomCard());
});

function init() {
  $('.drop').droppable( {
    drop: handleDropEvent
  }); 
}

var cardsInDeck = new Array();
var numberOfCardsInDeck = 5;
cardsInDeck[0] = "AceHearts";
cardsInDeck[1] = "Clubs2";
cardsInDeck[2] = "ClubsAce";
cardsInDeck[3] = "DiamondsKing";
cardsInDeck[4] = "SpadesJack";

function dealCard(i) {
    if (numberOfCardsInDeck == 0) return false;
    var img = document.createElement("img");
    img.src = "https://cop4813eaglin.pbworks.com/f/" + cardsInDeck[i] + ".png";

    document.body.appendChild(img);
    removeCard(i);
}

function randomCard() {
   return Math.floor(Math.random() * numberOfCardsInDeck);  
}
 function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;
  $('#drop').html( 'The card with ID "' + draggable.attr('id') + '" was dropped onto me!' );
    
 }

function removeCard(c)
{
    // simply make every higher numbered card move down 1
    for (j=c; j <= numberOfCardsInDeck - 2; j++)
    {
        cardsInDeck[j] = cardsInDeck[j+1];
    }
    numberOfCardsInDeck--;
}

.drop {
    float: left;
    width: 400px;
    height: 200px;
    background-color: #BC5347;
}

<input type="button" value="Deal Card" id="deal" />
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id='drop' class='drop'>Drop Here</div>

Answer 1

首先，包括jquery ui.

其次，创建图片后使其可拖动：

function dealCard(i) {
    if (numberOfCardsInDeck == 0) return false;
    var img = document.createElement("img");
    img.src = "https://cop4813eaglin.pbworks.com/f/" + cardsInDeck[i] + ".png";
    $(img).draggable();

    document.body.appendChild(img);
    removeCard(i);
}

此处更新fiddle。

Answer 2

请参考Drag and Drop Basic tutorial

要使 img 可拖动，您必须：

将可拖动属性设置为 "true"，我没看到你在代码中的什么地方这样做
设置拖动事件的句柄函数以确保您在拖动时传输的数据

Answer 3

简单的逻辑，让卡片可以拖动，让你的盒子可以放下。并向其添加更多...使用 .append 这样拖动的卡片将被丢弃并仅附加在您的框中

无法使可拖动的工作

Can't make the draggable to work

html

javascript

jquery

drag