CODEWITHSUNDEEP
knockout.js
Henrik
Henrik

Reputation: 1807

Drag and drop lists - remove item on double click

Is it possible to add event to remove itom from drag and drop lists and from associating observableArray (using sortable) ?

I've tried using same logic as for removing on double click in multi select list, but without success:

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>

Code:

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

Upvotes: 0

Views: 377

Answers (1)

PatrickSteele
PatrickSteele

Reputation: 14677

Double-clicking the LI doesn't make it selected, so your jQuery to find nameToRemove isn't finding the text properly. Instead, use this (and you can do it outside the remove function since it only needs to be grabbed one:

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

Here's the updated JSFiddle.

Upvotes: 1

Related Questions