将目标拖放到可排序容器之外

问题描述

我正在尝试使用Knockout和jQuery设置拖放克隆，但我无法弄清楚这一点.
我有尼迈耶写的敲除排序绑定，但是我找不到钩子就是我想要的.

I'm trying to set up drag and drop cloning with Knockout and jQuery, but I can't figure this bit out.
I have the knockout-sortable binding that Niemeyer wrote, but I can't find a way to hook it up how I'd like.

我希望connectClass能够捕获"拖放并将它们传递给子元素Sortable，但显然不能.这是我从尼迈耶分叉的小提琴，非常简单地显示了我正在尝试做的事情.

I was hoping the connectClass would be able to "catch" drops and pass them into the child element Sortable, but apparently not. Here's a fiddle I forked from Niemeyer that shows pretty simply what I'm trying to do.

http://jsfiddle.net/Kal_Torak/g74xN/3/

我的Sortable绑定元素并不总是要在其中包含项，因此列表本身将不可见，因此我需要能够将其放到父容器的任何位置，并按预期添加它们

My Sortable bound elements aren't always going to have items in them, so the list itself won't be visible, so I need to be able to drop anywhere on the parent container and have them added as you'd expect.

推荐答案

一种选择是添加一些droppable绑定，使其与sortable和draggable绑定配合使用.您可以通过多种方式进行操作，但这是将处理程序传递给droppable的一种方法，它调用该处理程序将新项目作为第一个参数传递.

One option would be to add a little droppable binding that plays nice with the sortable and draggable bindings. There are a few ways that you could do it, but here is one way where you pass a handler to droppable and it calls the handler passing the new item as the first argument.

ko.bindingHandlers.droppable = {
    init: function(element, valueAccessor) {
        var dropHandler = valueAccessor() || {};

        $(element).droppable({
            drop: function(event, ui) {
               var item = ko.utils.domData.get(ui.draggable[0], "ko_dragItem");

                if (item) {
                    item = item.clone ? item.clone() : item;
                    dropHandler.call(this, item, event, ui);
                }
            }
        });
    }
};

然后，您将其绑定为:

<div id="main" data-bind="droppable: addTask">

通过addTask推送到您的observbaleArray.

With addTask pushing to your observbaleArray.

此处提供示例: http://jsfiddle.net/rniemeyer/3JBnh/

这篇关于将目标拖放到可排序容器之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！