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

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

每一行的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内容”必须具有的风格“显示：块”。这可以写在主要的CSS风格，或硬编码到本身（例如）

问题是，页面加载时，你有点想要关闭所有行（或至少除了一个）。这意味着'display'最初应该设置为'none'。这部分很简单。一些jQuery的可以改变在页面加载这个CSS就绪（）事件中：

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

而且有一个叫做“切换”当你点击H2标签自动交换块&没有之间的这个CSS显示其中一个jQuery命令。所以我可以显示或隐藏每一行。

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

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

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

来源

2010-01-25 WastedSpace

可以使用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-25 11:01:24

谢谢，但我已经成功地使用它。主要的问题是弄清楚为什么当您在ready（）事件中设置display：none时，该项目无法被拖入可排序列表中。但是，如果您将它们保留为显示：页面加载时阻止，您可以...我要做的是查看更基本的示例，并查看它是否也发生了这种情况。不知道是否有某种缓存问题...？ – WastedSpace 2010-01-26 17:13:42

不能完全确定这是否是你的限制范围内可接受的解决方案，但你必须显示要拖到它们的元素，所以我会建议在拖动开始时取消隐藏元素。这样，他们不会看到，直到他们真的需要。

你可以做这样的事情：

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

来源

2010-01-25 11:31:50

谢谢，但这并没有工作，我怕（它确实打开/显示内容 - 但项目不能被拖入它们）。我甚至在加载页面时保持所有div都打开，然后创建一个名为show/hide的按钮，让您手动打开/关闭所有div。这个工程，但... ...我所学到的是，它似乎记得ready（）事件内的显示状态...如果你使用代码隐藏所有的div在ready（）中，项目不能被拖入可排序列表中。如果您在ready（）事件中将所有div都可见（display：block），则可以拖动。奇怪... 这可能是某种缓存问题？ – WastedSpace 2010-01-26 17:10:40

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

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

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

来源

2011-10-07 16:51:33

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

回答

相关问题