jquery – 可排序 – 将项目从列表拖放到另一个(复制)

<div class="list">
    <h2>stored procedures In Db 1</h2>
    <ul class="list" data-bind="sortable: { data: storedProceduresInDB1,beforeMove: checkAndCopy }">
        <li class="item" data-bind="text: Name"></li>
    </ul>
</div><br>

<div class="list">
    <h2>stored procedures In DB 2</h2>
    <ul class="list" data-bind="sortable: { data: storedProceduresInDB2,beforeMove: checkAndCopy }">
        <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.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,event.item);
        }
        if(event.targetParent != event@L_674_6@urceParent) {
            event.cancelDrop = true;
        }
    };
};

ko.applyBindings(new viewmodel());

这是一个允许一次排序多个项目的解决方案.基于 this related answer但修改为使用knockout.js和knockout-sortable.

JSfiddle(在Chrome中测试)：http://jsfiddle.net/QWgRF/715/

HTML

向可排序项和列表项添加了ID,以便jQuery可排序代码可以确定正在选择哪些项.

添加了一个options属性,该属性被传递给底层的jQuery Sortable插件.

为每个列表项添加了一个单击处理程序,以供选择和多选.

<div class="list">
    <h2>stored procedures In Db 1</h2>
    <ul class="list" id="sortableForDB_1" data-bind="sortable: {
      data: storedProceduresInDB1,beforeMove: checkAndCopy,options: multiSortabLeoptions }">
        <li class="item" data-bind="attr: { id: 'sp_'+Id },text: Name,click: $root.SELEctProcedure.bind($data,$parent.storedProceduresInDB1()),css: { SELEcted: SELEcted }">
        </li>
    </ul>
</div>
<div class="list">
    <h2>stored procedures In DB 2</h2>
    <ul class="list" id="sortableForDB_2" data-bind="sortable:  {
      data: storedProceduresInDB2,$parent.storedProceduresInDB2()),css: { SELEcted: SELEcted }">
        </li>
    </ul>
</div>

JavaScript的

可排序的选项.延迟150以允许点击处理程序用于选择.还原0因为动画看起来很奇怪我们如何搞乱列表和助手.

stop函数重置observableArrays,导致刷新列表html.

辅助函数抓取所有选定的项目并将它们添加到新的帮助程序标记中,以允许拖动多个项目的可视化.

var multiSortabLeoptions =  {
    delay: 150,revert: 0,stop: function(event,ui) {
        // Force lists to refresh all items
        var db1 = myviewmodel.storedProceduresInDB1,db2 = myviewmodel.storedProceduresInDB2,temp1 = db1(),temp2 = db2();
        ui.item.remove();
        db1([]);
        db1(temp1);
        db2([]);
        db2(temp2);
    },Helper: function(event,$item) {
        // probably a better way to pass these around than in id attributes,but it works
        var dbId = $item.parent().attr('id').split('_')[1],itemId = $item.attr('id').split('_')[1],db = myviewmodel['storedProceduresInDB'+dbId];

        // If you grab an unhighlighted item to drag,then deSELEct (unhighlight) everything else
        if(!$item.hasClass('SELEcted')) {
            ko.utils.arrayForEach(db(),function(item) {
                if(item.Id == itemId) {
                    item.SELEcted(true);
                } else {
                    item.SELEcted(false);
                }
            });
        }

        // Create a Helper object with all currently SELEcted items
        var $SELEcted = $item.parent().find('.SELEcted');
        var $Helper = $('<li class="Helper"/>');
        $Helper.append($SELEcted.clone());
        $SELEcted.not($item).remove();
        return $Helper;
    }
};

查看模型.为每个存储过程添加了SELEcted observable属性.添加了一个SELEctProcedure方法,根据点击次数和ctrl点击次数更新新的SELEcted属性.

还大量修改了checkAndCopy方法.我认为内联评论可以解释它是如何运作的.

var viewmodel = function () {
    var self = this;
    self.storedProceduresInDB1 = ko.observableArray([
        { Name: 'SP1',Id: 1,SELEcted: ko.observable(false) },Id: 2,Id: 3,SELEcted: ko.observable(false) }
    ]);
    self.storedProceduresInDB2 = ko.observableArray([
        { Name: 'SP3',Id: 4,Id: 5,SELEcted: ko.observable(false) }
    ]);
    self.checkAndCopy = function(event) {
        var items;
        if(event.targetParent !== event@L_674_6@urceParent) {
            // Get all items that don't yet exist in the target
            items = ko.utils.arrayFilter(event@L_674_6@urceParent(),function(item) {
                return item.SELEcted() && !ko.utils.arrayFirst(event.targetParent(),function(targetItem) {
                    return targetItem.Id == item.Id;
                });
            });
            // Clone the items (otherwise the SELEcted observable is shared by the item in both lists)
            items = ko.utils.arraymap(items,function(item) {
                var clone = ko.toJS(item);
                clone.SELEcted = ko.observable(true);

                // While we're here,let's deSELEct the source items so it looks cleaner
                item.SELEcted(false);

                return clone;
            });
            // DeSELEct everything in the target list Now so when we splice only the new items are SELEcted
            ko.utils.arrayForEach(event.targetParent(),function(item) {
                item.SELEcted(false);
            });
        } else {
            // Moving items within list,grab all SELEcted items from list
            items = event@L_674_6@urceParent.remove(function(item) {
                return item.SELEcted();
            });
        }

        // splice items in at target index
        items = items.reverse();
        for(var i=0; i<items.length; i++) {
            event.targetParent.splice(event.targeTindex,items[i]);
        }

        // always cancel drop Now,since we're manually rearranging everything
        event.cancelDrop = true;
    };
    self.SELEctProcedure = function(array,$data,event) {
        if(!event.ctrlKey && !event.MetaKey) {
            $data.SELEcted(true);
            ko.utils.arrayForEach(array,function(item) {
                if(item !== $data) {
                    item.SELEcted(false);
                }
            });
        } else {
            $data.SELEcted(!$data.SELEcted());
        }
    };

};

添加了对View Model的全局引用,以便jQuery代码可以与它进行交互.

@H_26_13@myviewmodel = new viewmodel(); ko.applyBindings(myviewmodel);