我正在使用jQuery draggable和droppable以及可排序操作,我能够从一个div部分拖放到另一个div部分,但是在执行排序操作时我面临问题的droppable div部分。
当我将内容从draggable div部分拖动到droppable div部分时,它必须动态地获取list decimal,我应该能够在droppable div部分中进行排序(前后移动)。
请帮我实施谢谢!
http://jsfiddle.net/j6dqk54p/4/
html代码
<div>
<ol id="sortable"></ol>
</div>
<br/>
<div>
<ul id="draggable">
<li>
<div class="qitem">
<div>
<span class="question">Item1</span>
</div>
</div>
</li>
<li>
<div class="qitem">
<div>
<span class="question">Item2</span>
</div>
</div>
</li>
</ul>
</div>
jquery代码
$(document).ready(function() {
$("#sortable").sortable({
revert: true,
refreshPositions: true ,
helper : 'clone',
cursor: "move",
delay: 1,
tolerance: 'pointer',
revert: 50
});
$("#sortable").disableSelection();
$(".qitem").draggable({
//containment : "#container",
tolerance:"pointer",
helper : 'clone',
refreshPositions: true ,
revert : 'invalid',
opacity:.4,
});
$("#sortable").droppable({
revert:true,
hoverClass : 'ui-state-highlight',
greedy: true,
refreshPositions: true,
drop : function(ev, ui)
{
$(ui.draggable).clone().appendTo(this);
if($(this)[0].id === "sortable")
{
console.log($(this).closest("button").find('.hello'));
$(this).find('.hello').hide();
$(this).find('.btn').show();
ui.draggable.draggable( 'disable' ).closest('li').prependTo(ui.draggable.closest('ul'));
return true;
}
}
});
});