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

Posted 2023-05-08

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

【英文标题】：jQuery drag element into sortable list that has initial state as hidden

【发布时间】：2011-01-09 01:22:19

【问题描述】：

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

每一行的 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() 事件中显示了一行（display:block），则可以将项目拖到可排序列表中（即使您在显示和隐藏行之间切换）。

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

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

【参考方案1】：

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

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

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

【参考方案2】：

您可以使用 connectToSortable 选项 示例

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

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

【讨论】：

谢谢，但是我已经成功使用了。主要问题是弄清楚为什么当您在 ready() 事件中设置 display:none 时，无法将项目拖到可排序列表中。但是，如果您将它们保留为 display:block 在页面加载时，您可以... 我要做的是看一个更基本的示例，看看它是否也会发生这种情况。不知道是否存在某种缓存问题...？

【参考方案3】：

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

你可以这样做：

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

【讨论】：

谢谢，但恐怕这不起作用（它确实打开/显示内容 - 但不能将项目拖入其中）。我什至在页面加载时让所有 div 保持打开状态，然后创建了一个名为 show/hide 的按钮，让您可以手动打开/关闭所有 div。这可行，但是... ...我了解到的是，它似乎记住了 ready() 事件中的显示状态...如果您使用代码隐藏 ready() 中的所有 div，则无法拖动项目进入可排序的列表。如果您在 ready() 事件中让所有 div 可见（显示：块），那么您可以拖动。奇怪...可能是某种缓存问题？