Question

我正在开发一个基于jQuery UI可拖动功能的工具。

我在表格的左栏中有许多方框。当它们被拖动到黄色区域时，我希望剩余的div向上移动以填充被移动的框留下的空间。

但它没有发生。为什么？

Answer 1

测试非常困难，但根据我对这个问题的了解，这可能是原因/解决方案。

droppable插件不会将拖动的元素从其原始标记位置移除，它会在视觉上移动到droppable元素（某些选项允许接受删除某些元素，事件等）。 / p>

元素具有position: relative css规则，表示元素的“正常流程”（按照它们在标记中出现的顺序）。因此，即使元素在视觉上放置在带有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()）并在dropzone（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 UI在droppable demo page上做了类似的事情。在drop事件中，他们调用函数deleteImage()，从原始标记中删除拖动的图像并将其附加到放置区。

我希望我足够清楚:-)
我也希望我是对的，快速测试很难，但这很有意义： - ）

滑动剩余的项目

1 个答案: