[英]Expanding the jQuery Sortable Dropzone
I am using jQuery sortable to create areas that list items can be dropped onto from a source list. 我正在使用可排序的jQuery创建可将列表项从源列表拖放到其中的区域。 In my destination zones, I have a
ul
with a class that acts as the dropzone. 在我的目标区域中,我有一个
ul
,该类具有作为dropzone的类。 However, this ul
is within a bootstrap panel-body
and further narrows down where the item can be dropped. 但是,此
ul
位于自举panel-body
并进一步缩小了可以放置项目的位置。
My goal is to figure out how to drop the item anywhere on the panel and have it be appended to the end of the ul
within the panel-body
. 我的目标是弄清楚如何将该项放置在面板上的任何位置,并将其附加到
panel-body
ul
的末尾。
This is what my source / destination look like: 这是我的源/目标的样子:
When I drag an item from the source to the destination (Export Fields) you will see below that the placeholder is shown within the panel body. 当我将一个项目从源拖动到目标(“导出字段”)时,您会在下面看到占位符显示在面板主体中。
As it stands, everything is functioning but I am trying to make it a little more user friendly so an item from the left can be dropped on any panel on the right and it will automatically append it to the end of the ul
without the user having to drag the li
to the specific ul
dropzone. 就目前而言,一切正常,但我正在尝试使其更加用户友好,因此可以将左侧的项目放置在右侧的任何面板上,它将自动将其追加到
ul
的末尾,而无需用户将li
拖到特定的ul
dropzone。
Any tips on how I can achieve this? 关于如何实现此目标的任何提示?
Here is a fiddle of my setup: https://jsfiddle.net/tdhkzsfm/ 这是我的设置的小提琴: https : //jsfiddle.net/tdhkzsfm/
tolerance: 'pointer',
This option will help you a little bit..It won't require 50% intersection with your other list element. 此选项将为您提供一点帮助。它不需要与其他列表元素相交50%。 It's not the full answer however.
但是,这并不是完整的答案。 I suspect that you will need to change your connectWith parameter as well to be the panel itself.
我怀疑您也需要更改connectWith参数才能成为面板本身。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.