Knockout Sortables、Draggables 和 Droppables - 在 droppables 之间移动的问题

如何解决Knockout Sortables、Draggables 和 Droppables - 在 droppables 之间移动的问题

我们正在尝试构建一些东西，让用户拥有一堆字母，他们可以将这些字母拖到特定的答案位置。所以这个想法是用户可以拼出一个单词，例如通过从银行拖下 4 个字母并将它们放入正确答案桶中。我能够得到一些工作，答案是可拖放内的可拖放，但是当我允许用户从一个可拖放/可拖拉拖到另一个时，我看到了一些奇怪的结果。看起来它仍然试图克隆移动，实际上它搞砸了 HTML。

我们所做的是将初始字母库设置成这样：

    <div id="phonemeOptions" data-bind="foreach: $root.Page.phonemeOptions" class="dragableSource center-block text-center phonemeOptions">
        <div class="canclick sortablePhrase ui-draggable phonemeOption" data-bind="draggable: { data: $data,options: { helper: 'clone' } }">
            <div class="abbr" data-bind="text: abbreviation"></div>
            <div class="bucketText" data-bind="text: text"></div>
        </div>
    </div>

然后答案“buckets”是这样设置的：

<div class="phoneme-answer-Box bucket studentBox" id="phonemeContainer1" data-bind="droppable: $root.Answers.phonemeDrop1">
    <span class="phoneme-x fa fa-times-circle-o" title="Remove phoneme" data-bind="visible: $root.Answers.phonemeDrop1() != undefined,click: function() { $root.Clearphoneme(1); }"></span>
    <div class="sortableSource sortableDestination" style="list-style-type:none; padding-left: 0;">
        <!-- ko if: $root.Answers.phonemeDrop1 -->
        <div style="position:relative" class="canclick sortablePhrase phoneme-answer-Box-li" data-bind="draggable: { data: $root.Answers.phonemeDrop1 }">
            <div id="phoneme-Box-inner-1" class="phoneme-answer-Box-inner" data-bind="text: abbreviation">
            </div>
            <div class="phoneme-answer-Box-sub" data-bind="text: text">
            </div>
        </div>
        <!-- /ko -->
    </div>
</div>

这是当您尝试从一个可放置物品移动到另一个物品时的结果。注意左边的桶仍然有一个 X，当你调试时，你可以看到两个盒子里仍然有一个项目。 HTML 正在从左桶移到右桶的 droppable 顶部