Gaz*_*ion 4 jquery jquery-ui-sortable
我有部分,每个部分都有项目.这些项目是可排序的对象,我可以从一个部分拖放到另一个部分.我们的一些客户拥有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>
Run Code Online (Sandbox Code Playgroud)
我遇到的问题是,排序功能会使用新填充的项目列表进行全部操作.
我就是这样做的,所以可以通过将鼠标悬停在列表上来打开列表:
//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' );
}
});
}
Run Code Online (Sandbox Code Playgroud)
我认为我需要的只是关于可排序内容的"refreshPosition"方法,但它并没有完全解决问题.我被允许在列表的END处删除一个项目,但我不能将它放在其他项目之间,除非我放弃它并再次重新选择它.有任何想法吗?
Gaz*_*ion 12
你知道我讨厌什么,当你坚持几个小时的事情,寻求帮助,然后稍后找到答案.
结果我实际上并没有寻找,refreshPositions只是简单的'' refresh.当我获取项目并在屏幕上移动它时,我刷新它们的位置,然后调用刷新以使新添加的项目被当前拖动识别.
我打算删除我的问题,但后来认为这可以帮助除了我之外的人;)
| 归档时间: |
|
| 查看次数: |
2741 次 |
| 最近记录: |