JQuery UI，组合Sortable with Droppable

我正在尝试将JQuery UI 排序与droppble创建多个页面用于删除和整理东西。我已经安装了备用沿着演示此博客条目：JQuery UI，组合Sortable with Droppable

http://whit.info/blog/2009/06/06/jquery-ui-combining-sortable-with-droppable/

，这里是一个的jsfiddle：

注意，您可以拖动到箱子排序，连成其他栏目。您也可以单击页面按钮切换页面。我的问题就出在这两个功能结合：

通过使用可放开，我允许用户拖动一个框，一个页面按钮，页面会然后切换，用户可以完成它拖到新显示的页面。问题是，当页面切换时，出现在拖动框下方的第一列没有而不是事件触发。您必须拖动到另一列，然后返回第一列以获取占位符。

我不确定，但我想我需要以某种方式清除事件，或手动触发它们。这个问题似乎源于这样一个事实：拖动的框在显示时位于列上方。

你能帮助解决这个深奥的困境吗？

谢谢！

更新：

所以我一直在考虑这个可能的变通。米歇尔建议开放刷新方法，这确实不能解决问题，但让我思考事件问题。

看起来，当你将鼠标移开然后再回来时，适当的事件就会发生。也许如果我可以手动触发第一列的mouseout事件，重置将允许mouseover事件正确触发。

我尝试这样做：

$(".column:first").trigger('mouseout');

但我不认为这是一样的排序的出事件。也许我应该开火那事件？

来源

2010-08-13 Whit

+1对于“两难”一词的相当体面的使用。尽管问题有三个或四个方面，但大家都称他/她的问题为“两难”。 – MvanGeest 2010-08-13 19:50:06

没有什么比四肢困境更糟。 :) – Whit 2010-08-13 20:59:04

添加'$（'。column'）。sortable（'refresh'）;'到'.over'回调的droppable帮助，但它是不一致的。我无法弄清楚如何让可排序的项目始终出现在列的顶部。 – Michal 2010-08-14 00:46:14

是的，加$（'。column'）。sortable（“refresh”）; 结束show_page（ID）功能为我工作（只是Firefox雷区测试）的：

function show_page(id) { 
    $('.page').removeClass('page_active'); 
    $('#page_'+id).addClass('page_active'); 
    $('.column').sortable("refresh"); 
}

来源

2010-08-16 19:01:57 edtechdev

不适合我。 Firefox和Chrome对我来说都具有相同的行为（即使进行刷新）：当页面切换时，该框不能放在第一列的第一个位置。占位符不显示。有时它会出现在第二个位置，但是要把它放到第一个位置上，你必须先移开然后再移回去。这里有一个截图：http://bit.ly/dmxl6T – Whit 2010-08-16 19:46:20

对不起，它没有工作，我刚刚在Chrome中进行了测试，并且修补程序也适用于我。也许它在不同的平台或版本上有所不同（我在Ubuntu中使用Chrome和Firefox的夜间版本）。 – edtechdev 2010-08-16 20:22:31

这在Chrome或Firefox的Ubuntu中不适用于我。 – Whit 2010-08-16 23:17:37

也许我误解了问题，但我不认为这有什么用“页面切换“。如果您同时打开两个页面并尝试将“Box 1”拖动到“Box 4”上方的某个位置，您会看到它不会触发“Box 4”的Sortable已收到Draggable，直到你去下面“框4”。这并不能解决您的问题，但可能会帮助您寻找更好的解决方案。

请参阅http://jsfiddle.net/nkBNP/7/为JSFiddle演示我的意思。

来源

2010-08-17 05:50:54 TML

你说得对。我似乎并不关心页面切换。 – Whit 2010-08-17 15:17:57

这个问题似乎是你不能从上到下（或者从上到下，它不会到最高点上方的位置）。 – 2010-08-17 22:05:19

至少对于自上而下的下降，我认为解决方案是在设置框类为可拖曳并将其链接到可排序对象的某处。

$(".box").draggable({ 
    tolerance: 'point', 
    connectToSortable: '.column', 
    snap:false, 
    helper : 'clone', 
});

此示例创建盒子的副本，但它确实让我拖箱1到2页，慢慢向下拖动上面的框5并获得放入头把交椅。虽然它非常敏感。您可能需要调整网格并快速调整以适应临时用户的要求。

我当然可以想象，一个可排序的对象不会期望从顶端下来，因为它期望从容器内进行排序。另一方面，Droppable期望事情从任何方向进入。

来源

2010-08-17 22:35:46

添加@ edtechdev的回答tolerance: 'intersect生产的东西，我想可能会满足你，惠特：

$(".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 
}

来源

2010-08-18 18:10:31 Ryley