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标签时，会自动将这个css显示交换到block＆amp;没有。所以我可以显示或隐藏每一行。

所以......如果在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');
    }
});

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();
        });
    }
});

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

3 个答案: