个人中心
gpt4 book ai didi

javascript - 删除所有子元素后，Knockout 拖放找不到 "drop zone"

转载 作者：太空宇宙 更新时间：2023-11-04 04:08:26 25 4
gpt4 key购买 nike

借助 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);

最佳答案

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

关于javascript - 删除所有子元素后，Knockout 拖放找不到 "drop zone"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21052722/

25 4 0
文章推荐： c - 使用开罗在 gtkentry 上方绘图
文章推荐： python - RabbitMQ/Celery(事件): Server unexpectedly closed connection
文章推荐： c++ - 标题困惑。编译器不识别数据类型
文章推荐： python - 为什么我的 ReLU 激活给出了错误的输出？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com