javascript JQuery UI，结合 Sortable 和 Droppable
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3480180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery UI, Combining Sortable with Droppable
提问by Whit
I am trying to combine JQuery UI sortablewith droppableto create multiple pages for dropping and sorting things. I have setup a blog entry with a stand-along demo here:
我正在尝试将 JQuery UI sortable与droppable结合起来创建多个页面来放置和排序东西。我在这里设置了一个带有独立演示的博客条目：
http://whit.info/blog/2009/06/06/jquery-ui-combining-sortable-with-droppable/
http://whit.info/blog/2009/06/06/jquery-ui-combining-sortable-with-droppable/
and here is a jsFiddle:
这是一个jsFiddle：
Note that you can drag to sort the boxes, even into other columns. You can also click the page buttons to switch pages. My problem lies in combining these two features:
请注意，您可以拖动以对框进行排序，甚至可以拖动到其他列中。您也可以单击页面按钮来切换页面。我的问题在于结合这两个功能：
By using droppable, I've allowed the user to drag a box to a pagebutton, the page will then switch, and the user can finish dragging it onto the newly revealed page. The problem is that when the page switches, the first column which appears under the dragged box doesn't have it's overevent fire. You have to drag to another column, and then back to the first column to get the placeholder to appear.
通过使用droppable，我允许用户将一个框拖到页面按钮上，然后页面将切换，用户可以将其拖到新显示的页面上。问题是当页面切换时，出现在拖动框下方的第一列没有它结束事件触发。您必须拖动到另一列，然后返回到第一列才能显示占位符。
I'm not sure, but I think I need to somehow clear the events, or fire them manually. The problem seems to stem from the fact that the dragged box is over the column when it is made visible.
我不确定，但我想我需要以某种方式清除事件，或者手动触发它们。问题似乎源于这样一个事实，即拖动的框在列可见时位于列上方。
Can you assist with this esoteric dilemma?
你能帮助解决这个深奥的困境吗？
Thanks!
谢谢！
Update:
更新：
So I have been considering possible work arounds for this. Michal suggested firing the refresh method, which indeed doesn't solve the problem, but made me think about event issues.
所以我一直在考虑可能的解决方法。Michal 建议触发refresh 方法，这确实不能解决问题，但让我想到了事件问题。
It seems that when you mouse away and then back again, the proper events fire. Perhaps if I can manually fire the mouseout event for the first column, the reset will allow the mouseover event to fire properly.
似乎当您将鼠标移开然后再次返回时，会触发正确的事件。也许如果我可以手动触发第一列的 mouseout 事件，重置将允许鼠标悬停事件正确触发。
I tried this:
我试过这个：
$(".column:first").trigger('mouseout');
But I don't think that is the same as sortable's out event. Perhaps I should fire thatevent?
但我认为这与sortable的 out 事件不同。也许我应该触发那个事件？
回答by TML
Maybe I'm misunderstanding the problem, but I don't think it has anything to do with the "page switching". If you turn on both pages at the same time and try to drag "Box 1" to a position above "Box 4", you'll see that it doesn't trigger that "Box 4"'s Sortable has received the Draggable until you go below"Box 4". This doesn't solve your problem, but perhaps will help you look in a better area for the solution.
也许我误解了这个问题，但我认为它与“页面切换”没有任何关系。如果您同时打开两个页面并尝试将“Box 1”拖到“Box 4”上方的位置，您将看到它不会触发“Box 4”的 Sortable 已收到 Draggable，直到你去下面的“框4”。这不能解决您的问题，但可能会帮助您寻找更好的解决方案。
See http://jsfiddle.net/nkBNP/7/for a JSFiddle that demonstrates what I mean.
请参阅http://jsfiddle.net/nkBNP/7/以了解说明我的意思的 JSFiddle。
回答by Hyman B Nimble
At least for the top down drop in I think the solution is somewhere in setting the box class to draggableand link it to the sortable object.
至少对于自上而下的下拉，我认为解决方案是将框类设置为可拖动并将其链接到可排序对象。
$(".box").draggable({
tolerance: 'point',
connectToSortable: '.column',
snap:false,
helper : 'clone',
});
This example creates a duplicate of the box but it does allow me to drag box 1 up to page 2 and slowly drag it down above box 5 and get placed into the top spot. It is very sensitive though. You may need to adjust the grids and snap to get it to work consistently for the casual user.
此示例创建了框的副本，但它确实允许我将框 1 拖到第 2 页，然后慢慢将其向下拖到框 5 上方并放置到顶部位置。虽然它非常敏感。您可能需要调整网格和捕捉，以使其对临时用户始终如一地工作。
I can certainly imagine that a sortable object wouldn't expect something to come down from the top, because it expects things to be sorted from within the container. Droppable on the other hand expects things to enter from any direction.
我当然可以想象一个可排序的对象不会期望从顶部下来的东西，因为它期望从容器内部对事物进行排序。另一方面，Droppable 期望事物从任何方向进入。
回答by Ryley
Adding @edtechdev's answer to tolerance: 'intersectproduced something I thought might satisfy you, Whit:
添加@edtechdev 的答案以tolerance: 'intersect产生一些我认为可能会让您满意的东西，Whit：
$(".column").sortable({
connectWith: '.column',
opacity: 0.4,
tolerance: 'intersect', //<--changed
placeholder: 'place_holder',
helper: function(event, el) {
var myclone = el.clone();
$('body').append(myclone);
return myclone;
},
}).disableSelection();
// ...
function show_page(id) {
$('.page').removeClass('page_active');
$('#page_'+id).addClass('page_active');
$('#page_'+id).find('.column:first').sortable('refresh'); //<- added
}
回答by Venkata Uma Lakkakula
Check out drag and drop portal built using jQuery and Asp.Net MVC, it has all implementation in blog posts: http://lakkakula.wordpress.com/2009/06/15/web-2-0-portal-using-asp-net-mvc-microsoft-ajax-client-templates-and-jquery-with-drag-and-drop-widget-personalization/
查看使用 jQuery 和 Asp.Net MVC 构建的拖放门户，它在博客文章中有所有实现：http: //lakkakula.wordpress.com/2009/06/15/web-2-0-portal-using-asp -net-mvc-microsoft-ajax-client-templates-and-jquery-with-drag-and-drop-widget-personalization/
回答by Cyril Mestrom
Sortable has an undocumented option refreshPositionswhich automatically updates the position of your droppables when they are sortable as well. This prevents the placeholder from being droppable instead of the actual droppable.
Sortable 有一个未公开的选项refreshPositions，当它们也可以排序时，它会自动更新你的 droppables 的位置。这可以防止占位符可放置而不是实际可放置。
回答by edtechdev
Yeah adding $('.column').sortable("refresh"); to end of the show_page(id) function worked for me (only tested in firefox minefield):
是的，添加 $('.column').sortable("refresh"); 结束 show_page(id) 函数对我有用（仅在 firefox 雷区中测试过）：
function show_page(id) {
$('.page').removeClass('page_active');
$('#page_'+id).addClass('page_active');
$('.column').sortable("refresh");
}
