在Knockout中拖放

Question

这是我的第一个模板：

     <script id="TestingTemplate" type="text/html"><li>
            <label data-bind="text: Value, attr:{'for': Value().replace(/ /g,'_')}"></label></li></script>

这是我的第二个模板：

 <script type="text/html" id="Testing"><!-- ko if: $data.CLASSIFICATION_NAME().toLowerCase() == 'general'  -->
         <!-- ko if: $data.ATTRIBUTE_DISPLAY_TYPE().toLowerCase() == AttributeEnum.NumberRange -->
        <li>
            <div class="divFilterRow">
                <div class="divFilterCol">
                    <input type="checkbox" data-bind="checked: ISATTRIBUTESELECTED, attr:{'id': ATTRIBUTE_NAME}, click: function(){checkedCallback($data); return true; }" />       
                </div>
                <div class="divFilterCol divFilterCph">
                    <label data-bind="    text: ATTRIBUTE_NAME, attr:{'for': ATTRIBUTE_NAME,'attributetooltip': ATTRIBUTE_DESCRIPTION}"></label>
                    <a class="iClose" href="javascript:void(0);" data-bind="    click: $data.removeSelectedAttribute , style: {display: ISATTRIBUTESELECTED() ? 'block' : 'none'}"></a>
                </div>
            </div>
            <div class="iClearBoth" />
            <div data-bind="    visible: ISATTRIBUTESELECTED">
                <div data-bind="    template: {name:  'sliderTemplate',foreach: filterSliderValues} "></div>
            </div>
        </li>
            <!-- /ko -->



          <!-- ko if: $data.ATTRIBUTE_DISPLAY_TYPE().toLowerCase() == AttributeEnum.MultipleChoiceList -->
        <li>
           <div class="divFilterRow">
                <div class="divFilterCol">
                    <input type="checkbox" data-bind="checked: ISATTRIBUTESELECTED, attr:{'id': ATTRIBUTE_NAME}, click: function(){checkedCallback($data); return true; }" />
                </div>
                <div class="divFilterCol divFilterCph">
                    <label data-bind="text: ATTRIBUTE_NAME, attr:{'for': ATTRIBUTE_NAME,'attributetooltip': ATTRIBUTE_DESCRIPTION }"></label>
                    <a class="iClose" href="javascript:void(0);" data-bind="click: $data.removeSelectedAttribute , style: {display: ISATTRIBUTESELECTED() ? 'block' : 'none'}"></a>
                </div>
            </div>
            <div class="iClearBoth" />
            <div data-bind="visible: ISATTRIBUTESELECTED">
                <div data-bind="    template: {name:  'sliderTemplate',foreach: filterSliderValues} "></div>
            </div>
            <div data-bind="visible: ISATTRIBUTESELECTED">
                <div  data-bind="dialog: {'autoOpen': false, 'title': ATTRIBUTE_NAME,'modal': true,
    'resizable': false, width: 950, draggable: false, closeOnEscape: false 
                @*,buttons: {
                                'Apply': function () {
                                    $(this).dialog('close');
                                }
                            } *@
},
    dialogVisible: isDialogOpen" 
                class="iSmallDialog" >
                    <div class="HelpBar" style="display: block; margin-bottom: 12px;">
                        @*<div class="divHelpHeading">
                            Help

                        </div>*@
                        <div class="divHelpContent" data-bind="text: ATTRIBUTE_DESCRIPTION">
                        </div>
                    </div>
                    <div style="padding-top: 5px; padding-bottom: 10px;">
                        Please select options from the list below:
                    </div>

                    @* This is for top selection area*@

                    <div style="overflow-y: auto; max-height: 200px;" class="ListOptions">             

               <ul data-bind=" sortable: { template:'TestingTemplate', data: filterListOptions,templateOptions: { parentList: filterListOptions}},attr:{'id': 'optionsUL'  + $index() },sortableList: filterListOptions">
                        </ul>   

</div>
                     @* This is for AND selection area*@
                        <div style="background-color:green; height:300px;">




                        </div>
                      <div class="iDialogSubmit">
                        <button data-bind="click: $data.onDialogCloseCallback,enable: isOptionsSelected" class="active">TestingApply</button>

                        <button class="btnInactive" data-dismiss="modal" data-bind="click: $data.onDialogClose" aria-hidden="true">TestingCancel</button>
                    </div>
                </div>
            </div>
        </li>
        <!-- /ko -->
        <!-- /ko -->
    </script>

以下是我的称呼方式：

<li id="liGeneral">
                    <div class="LHSListItem">General</div>
                    <div class="contentDivWithPadding fixHeightAccordian">
                        <div class="divAccordianContent" id="divAttributes_General">

                   @*<ul data-bind="template: { name : 'GeneralClassificationTemplate', foreach : filterData }"></ul>*@

   <ul data-bind="template: { name : 'Testing', foreach : filterData} "></ul>


                        </div>
                    </div>
                </li>

以下是我的输出：

这两个选项（即 Active 和 Out of Study ）完全可以互换，即它们可以轻松上下移动，但是当我尝试将它们放在绿色 div，他们不会搬到那里，但回到那里的位置？任何人都可以告诉我，为什么会这样。？