Question

是否可以在两个列表之间拖动jQuery UI可排序列表项，其中一个列在jQuery UI对话中，哪一个不在？

我正在尝试创建一个对话框，用户可以将对话框中的表单字段拖到页面上的表单中，但我无法将这些项目拖出对话边框。

提前致谢

修改

看起来拖拽和粪便实际上是有效的，但是一旦超出对话范围，就无法看到该项目。这不是很理想。（见redsquare's demo）

另一个编辑

为对话创建的主要div有overflow:hidden。如果我在Firebug中禁用它，拖动工作正常，所以我想我可以以某种方式覆盖它，但我怀疑这会导致更多问题。

Answer 1

演示here。

这会复制您的问题吗？我可以在两者之间拖动但是当你拖出或进入对话框时你失去了帮助。我认为当你搬出或进入对话框时可能需要调整z-indexing，但它仍然有效......只是！

我会在稍后再花一点时间尝试对此进行排序。

更新：调整z-index有助于（很好地帮助从列表拖动到对话 - 第一次！）......以后会更好！见here

NEW UPDATE这里的新演示，我必须使用帮助器来确保z-index保持正确。现在可以使用here

Answer 2

我在对话框之间排序元素时遇到了类似的问题，所以感谢代码的redsquare。已经能够进一步简化代码，这个自包含的位（不需要额外的标记）：

this.sortables = $( sortSelector ).sortable( {
    connectWith: sortSelector,
    zIndex : 99999,
    helper: function() {
        var helper = $( '.sortHelper li' );
        if ( !helper.length ) {
            helper = $('<ul><li></li></ul>')
                .addClass( 'sortHelper' )
                .appendTo( 'body' )
                .find( 'li' )
                .css( { 'z-index': 9999 } );
        }

        return helper;
    },
    start: function( event, ui ) {
        ui.helper.text( ui.item.text() );
    }
});

this jsfiddle的演示。

jQuery UI可排序和对话

2 个答案: