Knockout Drag&Drop 在删除所有子元素后找不到"drop zone"

在Ryan Niemeyer的博客文章的帮助下 http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html 我编写了允许在嵌套的可观察数组之间拖放的代码。我面临的问题是，当我删除"遇到"下的所有物品并想退回物品时，它找不到容器或放置区域以正常工作。它会下降，就好像它确实有效一样，但如果你查看 JSON 输出，你会发现它没有正确更新。当我删除所有遭遇并尝试将一个遭遇移回时，也存在同样的问题......它找不到它的"放置区"。我希望这是微不足道的事情，并感谢您的帮助。

我在这里有一个演示 http://plnkr.co/edit/n7IGItDOYTzCSfDHlwJS?p=preview

这是脚本：

 $(function() {
 //control visibility, give element focus, and select the contents (in order)
 ko.bindingHandlers.visibleAndSelect = {
 update: function(element, valueAccessor) {
   ko.bindingHandlers.visible.update(element, valueAccessor);
   if (valueAccessor()) {
     setTimeout(function() {
       $(element).find("input").focus().select();
     }, 0); //new encounters are not in DOM yet
   }
  }
 };
 var Dataset = function(name) {
 var self = this;
 self.dName = name;
 self.type = "Dataset";
 };
 // Encounter construction
 var Encounter = function(name, dss) {
 var self = this;
 self.name = name;
 self.datasets = ko.observableArray([]);
 self.type = "Encounter";
 $.each(dss, function(i, p) {
   self.datasets.push(new Dataset(p.dName));
 });
};
 // Patient construction
 var Patient = function(id, encounters) {
 var self = this;
 self.id = ko.observable(id);
 self.encounters = ko.observableArray([]);
 $.each(encounters, function(i, p) {
   self.encounters.push(new Encounter(p.name, p.Datasets));
 });
 };

  my.vm = {
 selectedItem: ko.observable(),
 patients: ko.observableArray([]),
 targetPatients: ko.observableArray([]), 

 isSelected: function(selectedItem) {
   return selectedItem === this.selectedItem();
 },


 isDropSpotMatch: function(arg) {
    //if (!my.vm.isSourceEncounterSelected && !my.vm.isTargetEncounterSelected)  {
    //    arg.cancelDrop = true;
    //}
    //var t = ko.toJSON(arg);
    //console.log(arg);
    //alert(ko.toJSON(arg.sourceParent()[0])); 
    console.log(arg.sourceParent()[0]);
    console.log(arg.targetParent()[0]);
    if (arg.sourceParent()[0].type != arg.targetParent()[0].type){
      arg.cancelDrop = true;  
    }

 },
clearItem: function(data, event) {
    if (data === self.selectedItem()) {
        my.vm.selectedItem(null);                
    }
    if (data.name() === "") {
       my.vm.patients.remove(data);   
       my.vm.targetPatients.remove(data);
    }
},
 // loading the observable array with sample data
 load: function() { 
   $.each(my.sourceData.data.Patients, function(i, p) {
     my.vm.patients.push(new Patient(p.Id, p.Encounters));
   });
    $.each(my.targetData.data.Patients, function(i, p) {
     my.vm.targetPatients.push(new Patient(p.Id, p.Encounters));
   });
 }
};
ko.bindingHandlers.sortable.beforeMove = my.vm.isDropSpotMatch;
//ko.bindingHandlers.sortable.afterMove = my.vm.isDropSpotMatch;
my.vm.load();
ko.applyBindings(my.vm);
});

这是我的网页：

<!DOCTYPE html>

<script data-require="knockout@*" data-semver="3.0.0"   src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="knockout-sortable.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="data.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="page">
<div id="main">
  <div class="showroom">
  <table>
       <tr>
         <td>
           <span data-bind="sortable: { template: 'taskTmpl', data: patients }"></span>      
         </td>
         <td>
           <span data-bind="sortable: { template: 'taskTmpl', data: targetPatients }">  </span>      
         </td>
       </tr>
     </table>
     <script id="taskTmpl" type="text/html">
      <ul data-bind="sortable: encounters">
      <div class="container"><div class="item">
        <li>
        <div class="encounterItem">
         <span data-bind="visible: !$root.isSelected($data)">
            <a href="#" data-bind="text: name, click: $root.selectedSourceEncounter">  </a>
        </span>
        <span data-bind="visibleAndSelect: $root.isSelected($data)">
            <input data-bind="value: name, event: { blur: $root.clearItem }" />
        </span>  
        </div>
        </div>
         <ul data-bind="sortable: datasets">
                <li>
                  <div class="datasetItem">
                    <span data-bind="visible: !$root.isSelected($data)"> 
                  <a href="#" data-bind="text: dName, click:    $root.selectedSourceEncounter"></a>
                </span>
                    <span data-bind="visibleAndSelect: $root.isSelected($data)">
                  <input data-bind="value: dName, event: { blur: $root.clearItem }" />
                </span>
                  </div>
                </li>
              </ul>
        </li>
      </ul>
        </div>
    </div></script>
  <div>
      JSON OUTPUT
        <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
    </div>       
  </div>
</div>
</div>
</body>
</html>

这是 css：

.container {
background-color: #BBB;
}
.datasetItem {
background-color: #BBB;
cursor: move;
text-align: left;
width: 100px;
}
.encounterItem {
background-color: #BBB;
cursor: move;
text-align: left;
width: 100px;
}
.encounterItem input {
width: 40px;
}
.datasetItem input {
width: 40px;
}
.ko_container {
    width: 255px;
    min-height: 50px;
    background-color: #ADDA;
}

最后是我的命名空间和虚拟数据：

var my = my || { }; //my namespace
my.dataservice = (function (my) {
"use strict";
var getPatients = function () {
    return my.sampleData;
};
return {
    getPatient: getPatients
};
})(my);
my.sourceData = (function (my) {    
"use strict";
var data = { Patients: [
                    { "Id": "1stId", "Encounters": [ { "name": "1stEncounter", "Datasets": [ { "dName": "1stDataset"}  ] }, { "name": "2ndEncounter", "Datasets": [ {  "dName": "2ndDataset"}  ] } ]  }
]
};
return {
    data: data
};
})(my);
my.targetData = (function (my) {    
"use strict";
var data = { Patients: [
                    { "Id": "T1stId", "Encounters": [ { "name": "21stEncounter",  "Datasets": [ { "dName": "21stDataset"}  ] }, { "name": "22ndEncounter", "Datasets": [ {  "dName": "22ndDataset"}  ] } ]  }
]
};
return {
    data: data
};
})(my);

我知道

这很愚蠢，但是向列表容器添加最小高度。

相关内容

最新更新

热门标签：