jQuery 将元素拖动到初始状态为隐藏的可排序列表中

Question

我似乎无法将初始状态为隐藏（即显示：无）的元素拖动到可排序列表中。

每行的 html 如下所示：

<div class="dragbox" id="item1" >
  <h2>Expression 1<span id="exp1"></span></h2>
  <div class="dragbox-content" >
    <ul class="dragrow1"></ul>
    <ul class="dragrow2"></ul>
  </div>
</div>

但是为了能够将字段放入“dragrow*”中，div“dragbox-content”必须具有“display:block”样式。这可以用主 css 样式编写，也可以硬编码到 div 本身中（例如）。

问题是，在页面加载时，您有点希望关闭所有行（或至少除了一行之外的所有行）。这意味着“显示”最初应设置为“无”。这部分很简单。一些 jQuery 可以在 read() 事件中的页面加载时更改此 css：

$('.dragbox')
.each(function(){
  $(this).find('.dragbox-content').hide();
});

并且有一个名为“toggle”的 jQuery 命令，当您单击 h2 标签时，该命令会自动在块和块之间交换此 css 显示。没有任何。所以我可以显示或隐藏每一行。

所以...如果在ready()事件中显示了一行(display:block)，就可以将项目拖到可排序列表中(即使您在显示和隐藏行之间切换)。

但是...如果在ready（）事件中隐藏了一行（显示：无），则无法将项目拖动到可排序列表中。

有什么想法吗？真的是卡在这个上了...

Answer 1

这可能为时已晚，但这是解决方案（也许它可以帮助其他人）。诀窍是您需要刷新可排序。

$('.dragitem').draggable({
    start: function() {
        // show your dropzone
        $('#dropzone').show();

        // refresh your sortable -- so you can drop
        $('#dropzone').sortable('refresh');
    }
});

Answer 2

您可以使用 connectToSortable 选项
示例

//getter
var connectToSortable = $('.selector').draggable('option', 'connectToSortable');
//setter
$('.selector').draggable('option', 'connectToSortable', 'ul#myList');

http://docs.jquery.com/UI/Draggable#option-connectToSortable

Answer 3

不完全确定这在您的约束范围内是否是可接受的解决方案，但您必须显示要拖动到它们的元素，因此我建议在拖动开始时取消隐藏元素。这样，直到真正需要时，它们才会可见。

你可以这样做：

$('.listOfDraggableItems').draggable({
    start: function(event, ui) {
        $('.dragbox').each(function(){
            $(this).find('.dragbox-content').show();
        });
    }
});