我有部分,每个部分都有项目。这些项目是可排序的对象,我可以从一个部分拖放到另一个部分。我们的一些客户拥有TON部分,其中包含大量商品,这使得浏览器瘫痪了。当我最初设计它时,我非常环保,所以效率并不是我的雷达,但现在我正在重新审视剧本,我遇到了一个问题。
要解决这个问题,我在我的部分列表中使用ajax进行延迟加载,只有在单击“打开部分”按钮时才从服务器获取这些项目。我们在低效系统中的一个功能是用户可以在一个封闭的部分上持有一个拖动的项目500ms,它将打开该部分。
这是生成的HTML:
<ul class="sections ui-sortable" style="display: block;">
<li id="s_3" class="ui-droppable">
<input type="hidden" value="3" name="section_id">
<span class="sectionName">Section 1</span>
<ul class="items ui-sortable" style="">
<!-- Items can go here -->
</ul>
</li>
<li id="s_11" class="ui-droppable">
<input type="hidden" value="11" name="section_id">
<span class="sectionName">Section 2</span>
<ul class="items ui-sortable" style="display: block;">
<li id="i_32">
<input type="hidden" value="32" name="item_id">
<span class="itemName">Item 1</span>
</li>
</ul>
</li>
</ul>
我遇到的问题是排序功能会使用新填充的项目列表进行全部操作。
我就是这样做的,所以可以将鼠标悬停在列表上来打开列表:
//sElement is the .sections ul
function initItemDroppable( sElement ) {
sElement.find('> li').droppable({
accept: '.items > li',
over: function( event, ui ) {
var section = $(this);
var section_id = section.find('input[name="section_id"]').val();
// only start the counter if the container isn't already visible
if( !$(section).find('.items').is(':visible') ) {
$( document ).oneTime( '500ms', 'expandCategoryTimer', function(){
//get the items and populated the list
getItems( section_id );
//according to jquery, refreshes the positions of all the sortable objects
$('.sections, .items').sortable('refreshPositions');
} );
}
},
out: function( event, ui ) {
$( document ).stopTime( 'expandCategoryTimer' );
}
});
}
我认为我所需要的只是关于可排序内容的“refreshPosition”方法,但它并不是很有效。我被允许在列表的END处删除一个项目,但我不能将它放在其他项目之间,除非我放弃它并再次重新选择它。有什么想法吗?
答案 0 :(得分:12)
你知道我讨厌什么,当你被困在某个地方几个小时,寻求帮助,然后在以后找到答案。
原来我实际上并不是在寻找refreshPositions
,而只是寻找refresh
。当我获取项目并在屏幕上移动它时,我刷新它们的位置,然后调用刷新以使新添加的项目被当前拖动识别。
我打算删除我的问题,但后来认为这可以帮助除了我以外的人;)