Question

在Ryan Niemeyer的博客文章http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html的帮助下，我编写了允许在嵌套的observablearrays之间进行拖放的代码。我面临的问题是，当我删除“遇到”下的所有项目，并想要返回一个项目时，它找不到容器或删除区域才能正常工作。它会像它确实工作一样掉落，但是如果你看一下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);
});

这是我的HTML：

<!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);

Answer 1

我知道这很愚蠢，但为列表容器添加了最小高度。

Knockout Drag＆amp;删除所有子元素后，Drop无法找到“drop zone”

1 个答案: