剑道多选拖放选择

Question

我在我的 Angular (1.5.1) 应用程序中使用 kendo-ui。我想在多选中添加拖放支持，以便用户可以将选择从一个多选拖放到另一个多选。我尝试过遵循剑道拖放指南。问题是多选数据源没有更新删除/附加值。由于使用了服务器端过滤，每当我以编程方式尝试更新多选值时，它都会被清除。谁能通过一些示例 sn-ps 指导我如何实现这一目标？谢谢！

用我使用的代码 sn-ps 更新：

关于多选中的更改功能 -

                    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);
                            }
                        }
                    },

initializeDraggable 函数 -

                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

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

简而言之，首先我用空白数组更新了数据源，然后在 $timeout 中更新了最新的 drop 值，以便更新反映。由于拖放发生在独立的多选指令实例之间，我还必须将调用程序多选实例传递给放置端，以便在放置操作完成后更新先前的实例数据源。片段如下

Drop Target初始化函数-

            $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);
            };

初始化 Draggable 函数 -

            $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();
                            }
                        });
                    }
                }
            };

关闭已解决的问题。如果有人在这方面需要任何帮助，请告诉我。谢谢！