Jquery UI - 嵌套的Droppables / Sortable [英] Jquery UI - Nested Droppables/Sortables

问题描述

我正在尝试构建一个互动的Web应用程序。使用Jquery UI，但我被困在这里 - 我似乎找不到一个方法来嵌套我的盒子（见小提琴演示）。例如，假设有四个框 - A ， B ， C ， D 。如果A是宽度和高度较高值的父级，我将b拖放到 A 中 - 这样可以正常工作。我尝试将另一个框 C 拖放到 A 中，这也可以正常工作。但是，当尝试将 D （甚至 C ）放弃到 B （嵌套）时，似乎无法正常工作（见小提琴）。

请注意，小提琴不包含单独的Boxes，而只是一个复制多个复选框。还要注意，我还没有实现排序功能（在小提琴中），因为我无法修复嵌套问题。

JS Fiddle：你需要什么？

总结：新的内箱必须贪心拦截事件。

I am trying to build an interactive web App. using Jquery UI, but I am stuck here - I can't seem to find a way to "Nest" my "boxes" (See fiddle for demo). For example assume there are four boxes - A, B , C , D. If A is the parent with high values for width and height, I drag and drop b into A - This works fine. I try dragging and dropping another "box" C into A, which also works fine. But when I try to drop D (or even C, this doesn't matter) into B (Nesting), it doesnt seem to work (See fiddle).

Notice that the fiddle doesn't contain separate "Boxes" but instead just one box thats replicated multiple times. Also note that I haven't implemented the sorting feature (in the fiddle) yet since I haven't been able to fix the nesting issue.

JS Fiddle: http://jsfiddle.net/JQwsf/

Just to make sure I'm not trying to confuse anyone here, I've attached an image.

Any help is really much appreciated. Thank you.

解决方案

Is this what you need?

Summary: the new inner box must be greedy to intercept events.

这篇关于Jquery UI - 嵌套的Droppables / Sortable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！