Reputation: 2428
There are 2 div Container top and botton which contains ul tag.
My requirement is when record is dragged onto 1st container the same record has to be retained even in bottom container. Top Container records should be sortable but bottom is used only for dragging the record to top container and bottom container is not sortable.
Top Container -> Sortable
Bottom Container -> Not Sortable (not needed)
Drag -> Happens only from bottom to top (when dragged record should be retained on top and bottom)
Jsfiddle Link 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 Code
<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>
Upvotes: 0
Views: 192
Reputation: 17144
You could use connectToSortable
option. Then your clone would be kept and simplify your code. Like this:
$(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'
});
});
http://jsfiddle.net/t0ndh136/1/
Upvotes: 1
Reputation: 353
If you are trying to append the items from the Bottom container to the Top container but leaving the original ones intact what you need to do is instead of:
$(ui.draggable).appendTo(this);
do this:
$(ui.draggable.clone()).appendTo(this);
Here is the working example: http://jsfiddle.net/bbhrsn9u/1/
Upvotes: 0