在多选列表中实施拖放操作?

时间:2014-04-08 07:19:17

标签: jquery knockout.js

是否可以对多选列表实施拖放功能,还是需要更改?我只希望能够将项目拖到另一个列表中,如果它还没有在该列表中。

我的代码到目前为止:

(function () {
    var _dragged;
    ko.bindingHandlers.drag = {
      init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var dragElement = $(element);
        var dragOptions = {
            helper: 'clone',
            revert: true,
            revertDuration: 0,
            start: function () {
                _dragged = ko.utils.unwrapObservable(valueAccessor().value);
            },
            cursor: 'default'
      };
      dragElement.draggable(dragOptions).disableSelection();
    }
};

ko.bindingHandlers.drop = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var dropElement = $(element);
        var dropOptions = {
            drop: function (event, ui) {
                valueAccessor().value(_dragged);
            }
        };
        dropElement.droppable(dropOptions);
    }
};
})();


var SProcsViewModel = function () {
   var self = this;
   self.storedProceduresInDB1 = ko.observableArray([{
       Name: "Sp1",
       Id: 1
   }, {
       Name: "Sp2",
       Id: 2
   }, {
       Name: "Sp3",
       Id: 3
   }, {
       Name: "Sp4",
       Id: 4
   }]);
   self.storedProceduresInDB1Orig = ko.observableArray([{
       Name: "Sp1",
       Id: 1
   }, {
       Name: "Sp2",
       Id: 2
   }, {
       Name: "Sp3",
       Id: 3
   }, {
       Name: "Sp4",
       Id: 4
   }]);
   self.selectedStoredProceduresInDb1 = ko.observableArray();

   self.storedProceduresInDB2 = ko.observableArray([{
       Name: "Sp2",
       Id: 2
   }, {
       Name: "Sp3",
       Id: 3
   }, {
       Name: "Sp5",
       Id: 5
   }, {
       Name: "Sp6",
       Id: 6
   }]);
   self.storedProceduresInDB2Orig = ko.observableArray([{
       Name: "Sp2",
       Id: 2
   }, {
       Name: "Sp3",
       Id: 3
   }, {
       Name: "Sp5",
       Id: 5
   }, {
       Name: "Sp6",
       Id: 6
   }]);
   self.selectedStoredProceduresInDb2 = ko.observableArray();

   return self;
};

ko.applyBindings(new SProcsViewModel());

我一直在尝试在我的多选列表中实现拖放功能而没有任何成功:

JSFiddle

非常感谢一些帮助,谢谢!

0 个答案:

没有答案