[jquery-ui]JQuery UI,结合排序与器可弃

标签: jQuery jQuery-UI
发布时间: 2011/5/26 16:27:36
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

您好 !

我试图把 JQuery UI 可排序器可弃 创建多个页面,丢弃和排序的事情。我已安装独立的演示:

http://whit.info/dev/sortdrop/

而且这里是 jsFiddle:

http://jsfiddle.net/VUuyx/

请注意,您可以将其拖到对两个盒子,甚至到其他的列进行排序。您还可以单击页面按钮切换页面。我的问题在于结合这两种功能:

通过使用 器可弃我还被允许用户拖动一个框, 页面 按钮,页面会然后切换,、 用户可以完成将其拖动到新显示的页上。问题是当页面切换时,第一列的拖放框下方会显示没有它的 过去 事件火。要拖动到另一列,然后再返回到要显示占位符的第一列。

我不知道,但我想我需要以某种方式清除事件,或手动触发它们。这个问题似乎来自拖放框中时列上,而是可见的事实。

您可以帮助这深奥的困境吗?

谢谢 !

更新:

所以我一直为此考虑可能的变通。米建议射击刷新的方法,它实际上并不能解决问题,但使我对事件的问题。

看来,当你走了鼠标然后再适当事件火。也许我可以手动射击第一列的鼠标事件,如果重置将允许鼠标悬停触发事件,正确。

我试过:

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

但我不认为这是相同 排序的事件了。也许我应该火 事件吗?

解决方法 1:

至少自上而下的下降,我认为解决方案是在什么地方设置框类 可拖动 并将其链接到可排序的对象。

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

本示例创建框中的副本,但它不会允许我拖动框 1 到第 2 页,并慢慢地将它向下拖动框 5 以上,并得到放入榜首。虽然是非常敏感。您可能需要调整网格和管理单元来让它开始工作一贯的休闲的用户。

当然,我可以想象可排序的对象不指望从顶部,下来的东西因为它期望事情来进行排序的容器内。Droppable 另外一方面期望从任何方向进入的事情。

解决方法 2:

耶加 $('.column').sortable("refresh");show_page(id) 函数的末尾,为我 (firefox 井田只测试) 的工作:

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

解决方法 3:

也许我误解的问题,但我不认为它有任何与页面切换。如果您同时打开两个网页,并尝试将"框 1"拖动到"框 4"上面的位置,您将看到它不会触发"框 4"Sortable 已收到 Draggable,直到您 下面 "框 4"。这并不能解决您的问题,但也许会帮助你看起来更好地区的解决方案。

JSFiddle,说明我的意思是,请参阅 http://jsfiddle.net/nkBNP/7/

解决方法 4:

添加 @ 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
}

解决方法 5:

签出,拖放式操作使用 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/

官方微信
官方QQ群
31647020