kendo multi select drag drop selection

Question

我在Angular(1.5.1(应用中使用Kendo-UI。我想在MultiSelect中添加拖放支持，以便用户可以将选择从一个多选择到另一个多选择。我尝试遵循Kendo Drag/Drop指南。问题是多选择数据源未使用删除/添加值进行更新。由于使用服务器端过滤，每当我编程尝试更新多选择值时，它都会被清除。谁能指导我如何使用一些示例片段来实现这一目标？谢谢！

使用我使用的代码片段更新：

多选择中的更改功能 -

                    change: function (e) {
                        if (e.sender.list.length > 0) {
                            var targetElement = $(e.sender.list[0]).find('div.k-list-scroller .k-item.k-state-hover.k-state-focused.k-state-selected p')
                            if (targetElement.length > 0) {
                                //get object from datasource
                                var selectedItem = _.find(scope.unifyMultiSelect.dataItems(), function (i) {
                                    return i[scope.options.dataValueField] == targetElement[0].innerText;
                                });
                                initializeDraggable(multiSelect.tagList, selectedItem);
                            }
                        }
                    },

初始化功能 -

                function initializeDraggable(ul, selectedItem) {
                    $(ul).find('li:last-child').kendoDraggable({
                        group: "multiSelectGroup",
                        dataValue: selectedItem,
                        hint: function (element) {
                            scope.unifyMultiSelect.value(_.without(scope.unifyMultiSelect.dataItems(), selectedItem));
                            return element.clone();
                        }
                    });
                };

Answer 1

该问题很久以前就解决了。抱歉，更新了。我提供的解决方案可能不是最好的，但这足以满足我的需求。稍后，我将尝试进一步改善它。

简而言之，首先，我更新了使用空白数组的数据源，然后更新了$超时内部的最新下降值，因此更新反映了。由于在独立的多选择指令实例之间发生拖放，因此我还必须传递调用器多选择实例才能下降结束，以便一旦完成Drop操作，我就可以更新先前的实例DataSource。摘要低于

下降目标初始化函数 -

            $scope.initializeDropTarget = function () {
                $scope.unifyMultiSelect.tagList.parent().kendoDropTarget({
                    group: "multiSelectGroup",
                    drop: function (e) {
                        var parentMultiselectOptions = e.draggable.options.parentMultiselectOptions;
                        //check if drop target is different multiselect instance
                        if (parentMultiselectOptions.instanceId != $scope.options.instanceId) {
                            var item = e.draggable.options.dataValue;
                            var multiselectItems = $scope.options.getSelectedObjects();
                            var selectedItem = _.find(multiselectItems, function (i) {
                                return i[$scope.options.dataValueField] == item[$scope.options.dataValueField];
                            });
                            if (!selectedItem) {
                                multiselectItems.push(item);
                                $scope.options.setSelectedObjectValues([]);
                                $timeout(function () {
                                    $scope.options.setSelectedObjectValues(multiselectItems);
                                }, 500);
                                finalizeDraggableItem(e.draggable);
                            }
                        }
                        //if dropped to same multiselect instance
                        else {
                            finalizeDraggableItem(e.draggable);
                        }
                    }
                });
            };

finalizedRaggableItem函数 -

            function finalizeDraggableItem(draggable) {
                var parentMultiselectOptions = draggable.options.parentMultiselectOptions;
                var item = draggable.options.dataValue;
                var multiSelectItems = parentMultiselectOptions.getSelectedObjects();
                parentMultiselectOptions.setSelectedObjectValues([]);
                $timeout(function () {
                    var filteredItems = _.filter(multiSelectItems, function (i) {
                        return i[$scope.options.dataValueField] != item[$scope.options.dataValueField];
                    });
                    //re organize selection if dropped to same multiselect
                    if (parentMultiselectOptions.instanceId == $scope.options.instanceId) {
                        filteredItems.push(item);
                    }
                    parentMultiselectOptions.setSelectedObjectValues(filteredItems);
                    draggable.destroy();
                    draggable.element.remove();
                }, 500);
            };

初始化可拖动功能 -

            $scope.options.initializeDraggable = function (selectedItems, isLastElement) {
                var listElements = isLastElement ? $scope.unifyMultiSelect.tagList.find('li:last-child') : $scope.unifyMultiSelect.tagList.find('li');
                for (var i = 0; i < selectedItems.length; i++) {
                    var selectedItem = selectedItems[i];
                    var element = $(_.find(listElements, function (el) {
                        return el.innerText.trim().replace(/s+/g, " ") == selectedItem[$scope.options.dataTextField].trim().replace(/s+/g, " ");//remove extra spaces and check
                    }));
                    if (element.length > 0) {
                        element.kendoDraggable({
                            group: "multiSelectGroup",
                            dataValue: selectedItem,
                            parentMultiselectOptions: $scope.options,
                            hint: function (element) {
                                return element.clone();
                            }
                        });
                    }
                }
            };

解决问题。请让我知道是否有人需要任何帮助。谢谢！