[英]Jquery UI Drag, Drop and Sortable (Retaining the dragged item)
有2个div容器顶部和包含ul标签的botton。
我的要求是,将记录拖到第一个容器上时,即使在底部容器中也必须保留相同的记录。 顶部容器记录应该是可排序的,但底部仅用于将记录拖动到顶部容器,而底部容器是不可排序的。
顶部容器 ->可排序
底部容器 ->无法排序(不需要)
拖动 ->仅从底部发生到顶部(当拖动的记录应保留在顶部和底部时)
Jsfiddle链接 http://jsfiddle.net/bbhrsn9u/
<script type="text/javascript">
$(document).ready(function() {
$("#sortable").sortable({
revert: true,
helper : 'clone',
revert :10
});
$("ol li").disableSelection();
$(".sort_list li").draggable({
tolerance:"pointer",
helper : 'clone',
refreshPositions: true ,
revert : 'invalid',
opacity:.4,
});
$(".drop_list ol").droppable({
revert:true,
greedy: true,
refreshPositions: true,
drop : function(ev, ui)
{
$(ui.draggable).appendTo(this);
if($(this)[0].id === "sortable")
{
console.log($(this).closest("button").find('.hello'));
$(this).find('.hello').hide();
$(this).find('.AH_section').show();
ui.draggable.draggable( 'disable' ).closest('li').prependTo(ui.draggable.closest('ul')); //this will append dragged list at top of the container
return true;
}
}
});
});
</script>
HTML代码
<div class="drop_list">
<ol id="sortable" style="list-style:decimal;">
<li id='item1' class="draggable_li qitem">
<span class="item">Item = 1</span>
</li>
<li id='item2' class="draggable_li qitem">
<span class="item">Item = 2</span>
</li>
<li id='item3' class="draggable_li qitem">
<span class="item">Item = 3</span>
</li>
<li id='item4' class="draggable_li qitem">
<span class="item">Item = 4</span>
</li>
</ol>
</div>
<div class="sort_list">
<ul id="draggable">
<li id='item1' class="draggable_li qitem">
<span class="item">Item Dragged = 1</span>
</li>
<li id='item2' class="draggable_li qitem">
<span class="item">Item Dragged = 2</span>
</li>
<li id='item3' class="draggable_li qitem">
<span class="item">Item Dragged = 3</span>
</li>
<li id='item4' class="draggable_li qitem">
<span class="item">Item Dragged = 4</span>
</li>
<li id='item5' class="draggable_li qitem">
<span class="item">Item Dragged = 5</span>
</li>
</ul>
</div>
您可以使用connectToSortable
选项。 然后将保留您的克隆并简化您的代码。 像这样:
$(document).ready(function() {
$("#sortable").sortable({
revert: true,
helper : 'clone',
revert :10
});
$("ol li").disableSelection();
$(".sort_list li").draggable({
tolerance:"pointer",
helper : 'clone',
refreshPositions: true ,
revert : 'invalid',
opacity:.4,
connectToSortable: '#sortable'
});
});
如果您试图将Bottom容器中的项目追加到Top容器中,但保持原样不变,则需要执行以下操作:
$(ui.draggable).appendTo(this);
做这个:
$(ui.draggable.clone()).appendTo(this);
这是工作示例: http : //jsfiddle.net/bbhrsn9u/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.