[英]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.