목록 끌어다 놓기 - 더블 클릭으로 항목 제거

Question

끌어서 놓기 목록에서 itom을 제거하고 observableArray (sortable을 사용하여)를 연결하는 이벤트를 추가 할 수 있습니까?

나는 다중 선택 목록에서 두 번 클릭에 제거와 같은 논리를 사용하여 시도했지만 성공하지했습니다

HTML :

<div class="list"> 
    <h2>Stored procedures In DB 2</h2> 
    <ul class="list" data-bind="sortable: { data: storedProceduresInDB2, beforeMove: checkAndCopy }, event: { dblclick: removeFromDb2 }"> 
     <li class="item" data-bind="text: Name"></li> 
    </ul> 
</div> 

코드 :

var ViewModel = function() { 
    var self = this; 
    self.storedProceduresInDB1 = ko.observableArray([ 
     { Name: 'SP1', Id: 1 }, 
     { Name: 'SP2', Id: 2 }, 
     { Name: 'SP3', Id: 3 } 
    ]); 
    self.storedProceduresInDB2 = ko.observableArray([ 
     { Name: 'SP3', Id: 3 }, 
     { Name: 'SP4', Id: 4 }, 
     { Name: 'SP5', Id: 5 } 
    ]); 
    self.storedProceduresInDB2Orig = ko.observableArray([ 
     { Name: 'SP3', Id: 3 }, 
     { Name: 'SP4', Id: 4 } 
    ]); 
    self.selectedStoredProcedureInDB1 = ko.observable(); 
    self.selectedStoredProcedureInDB2 = ko.observable(); 
    self.selectStoredProcedureInDB1 = function (sp) { 
     self.selectedStoredProcedureInDB1(sp); 
    }; 
    self.selectStoredProcedureInDB2 = function (sp) { 
     self.selectedStoredProcedureInDB2(sp); 
    }; 
    self.checkAndCopy = function(event) { 
     var targetHasItem = ko.utils.arrayFilter(event.targetParent(), function(item) { 
      return item.Id == event.item.Id; 
     }).length; 
     if(!targetHasItem) { 
      event.targetParent.splice(event.targetIndex, 0, event.item); 
     } 
     if(event.targetParent != event.sourceParent) { 
      event.cancelDrop = true; 
     } 
    }; 

    self.removeFromDb2 = function(item, event){  
     self.storedProceduresInDB2.remove(function(item) { 
      var nameToRemove = $(event.currentTarget).find("option:selected").text(); 
      var isOrig = ko.utils.arrayFirst(self.storedProceduresInDB2Orig(), function(item){ 
       return item.Name == nameToRemove; 
      }); 
      return !isOrig && item.Name == nameToRemove; 
     }); 
    } 
}; 

ko.applyBindings(new ViewModel()); 

JSFiddle

Answer 1

LI를 두 번 클릭해도 선택되지 않으므로 nameToRemove이라는 jQuery가 텍스트를 제대로 찾을 수 없습니다. 대신, 이것을 사용 (그리고 그것은 단지 하나 잡고 할 필요가 있기 때문에 당신은 remove 기능을 외부에서 작업을 수행 할 수 있습니다. 여기

var nameToRemove = $(event.target).text(); 

가 updated JSFiddle의