向上滑動剩餘項目

Question

我正在研究基於jQuery UI可拖動功能的工具。

我在表的左列中有許多方框。當他們被拖入黃色區域時，我希望剩下的div向上移動以填充被移動的盒子留下的空間。

但沒有發生。爲什麼？

Answer 1

這是相當困難的測試，但從我對這個問題的知識是一個可能的原因/解決方案。

droppable插件不會將拖動的元素從其原始標記位置中移除，而是將其可視化地移動到可放置元素（允許接受放棄某些元素或不允許事件等）。

元素有一個position: relative css規則，它表示元素的「正常流程」（按它們在標記中出現的順序）。因此，即使元素可視化地放置在頁面上的其他地方，它在標記中的位置仍然相同，並且仍然佔用它通常應該使用的空間。

這fiddle說明什麼，我試圖解釋:-)

通過查看源代碼形式的「工作網站」，他們實際上從原來的可拖動列表中刪除拖動的元素，並重新創建它在可丟棄的列表中！

當他們定義.droppable()他們這樣做：

h.droppable({ 
    tolerance: "intersect", 
    accept: ".card", 
    greedy: true, 
    drop: function (a, b) { 
     card = b.draggable; 
     putCardIntoStack(card, c) 
    } 
}); 

在drop事件，他們稱之爲putCardIntoStack(card, c)傳遞當前拖動的元素作爲card參數。在這個方法中，他們刪除原來的「卡」（a.remove()）和懸浮窗（newcard = createCard();）重新創建：

function putCardIntoStack(a, b) { 
    progressVal = $('#progBarRd').width(); 
    card_idDOM = a.attr('id'); 
    card_idDB = card_idDOM.substr(IDPREFIX_CARD.length, card_idDOM.length - IDPREFIX_CARD.length); 
    stack_idDB = b.substr(IDPREFIX_STACK.length, b.length - IDPREFIX_STACK.length); 
    $.ajax({ 
     url: URL_DRAGDROPAJAX, 
     type: 'POST', 
     data: 'action=movecard&cardid=' + card_idDB + '&tostack=' + stack_idDB + '&prog=' + progressVal 
    }); 

    // 'a' is the card 
    // they extract the id/content from the dragged card 
    cardId = a.attr('id'); 
    cardLabel = a.text(); 

    // they remove the card from the DOM 
    a.remove(); 

    // they create a new card with the extracted info 
    newcard = createCard(cardId, cardLabel); 
    newcard.addClass('stackcard'); 

    // and append it to the dropzone 
    $('#' + b).removeClass("empty").find('.stackDrop').append(newcard); 

    globalcheck() 
} 

jQuery用戶界面確實在droppable demo page類似的事情。在drop事件中，他們調用函數deleteImage()，該函數從原始標記中刪除拖動的圖像並將其附加到放置區域。

我希望我足夠清楚:-)
我也希望我是對的，這是很困難的快速測試，但它是有道理:-)