Не могу заставить draggable работать

У меня есть код jsfiddle, который я не могу заставить его работать, у меня есть все функции, работающие, кроме draggable. Когда я добавляю $(init), кнопка сделки перестает работать, и я не могу ее достать, чтобы снять карты, как только я удалю $(init), он работает, но не перетаскивает. Может кто-то, пожалуйста, помогите мне разобраться, как сделать перетаскиваемую работу? Спасибо.Не могу заставить draggable работать

Мои 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>

источник

2015-10-09 Macho Man

Кнопка сделки перестает работать, когда вызывается функция init, потому что вы не включили jquery ui в свой jsfiddle. После этого вы должны сделать ваши изображения перетаскиваемыми. Вы можете найти здесь пример: https://jqueryui.com/droppable/ – calinaadi

Прежде всего, включают в себя 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.

источник

2015-10-09 07:52:45

Отлично, спасибо за вашу помощь, я придерживался $ (init); и перетаскивается в неправильное место. –

Пожалуйста, обратитесь к Drag and Drop Basic tutorial

Для того, чтобы IMG Draggable вы должны:

установить перемещаемой attribut "истина", я не вижу, где в коде вы делаете это
набор функция дескриптора события перетаскивания, чтобы быть уверенным, какие данные вы передаете при перетаскивании

источник

2015-10-09 07:54:19 Aroniaina

Простая логика, сделайте карты перетаскиваемыми и ваша коробка как droppab ле. И добавьте еще к нему ... используйте .append, чтобы перетаскиваемая карта была отброшена и добавлена внутри вашего поля.

источник

2015-10-09 07:59:45

Не могу заставить draggable работать

ответ

Смежные вопросы