2

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

每行的 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 可以在 ready() 事件内的页面加载时更改此 css：

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

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

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

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

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

4

3 回答 3

5

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

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

        // refresh your sortable -- so you can drop
        $('#dropzone').sortable('refresh');
    }
});
于 2011-10-07T16:51:33.583 回答
0

您可以使用 connectToSortable 选项示例

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

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

于 2010-01-25T11:01:24.927 回答
0

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

你可以这样做：

$('.listOfDraggableItems').draggable({
    start: function(event, ui) {
        $('.dragbox').each(function(){
            $(this).find('.dragbox-content').show();
        });
    }
});
于 2010-01-25T11:31:50.973 回答