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

Question

我似乎无法将元素拖动到可初始状态为隐藏的可排序列表(即display:none).

每行的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本身(例如).

麻烦的是,在页面加载时,你有点想要关闭所有行(或者至少除了一行之外).这意味着'display'应该最初设置为'none'.这部分很容易.一些jQuery可以在ready()事件中的页面加载时更改此css:

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

还有一个名为"toggle"的jQuery命令,当你单击h2标签时,会自动在block&none之间交换这个css显示.所以我可以显示或隐藏每一行.

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

但是......如果在ready()事件中隐藏了一行(display:none),则无法将项目拖动到可排序列表中.

有任何想法吗？真的卡在这一个......

Answer 1

这可能为时已晚,但这是解决方案(也许它可以帮助其他人).诀窍是你需要刷新可排序的.

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

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