Is it possible to switch from draggable to sortable and back?

Is it possible to switch from draggable to sortable and back?

here's what I've got:

I want to be able to drag items that were once apart of a sortable list.

so far, I've been able to accomplish all interactions and gotten them all to work with the code I'm using.

  1. function sortable(elem){
  2.   if (elem.checked == true ){
  3.    make_not_draggable();
  4.    $( "#sortable" ).sortable( "option", "disabled", false );
  5.   }else{
  6.    $( "#sortable" ).sortable( "option", "disabled", true );
  7.    make_draggable();
  8.   }
  9. }

  11. function make_draggable(){
  12.   $("#sortable").find('li').draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
  13.   $("#sortable").find('li').draggable( "option", "disabled", false ).draggable("option", "containment", "window" ).on('drag',function(event,ui){ ui.helper.css('position','absolute').css('z-index','1000');});
  14. }

  16. function make_not_draggable(){
  17.   $("#sortable").find('li').draggable( "option", "disabled", true ).removeClass('ui-state-disabled').css('left','').css('top','').css('position','relative');

  19. }
HTML: 
  2. <div style="float:right;margin-right:80px;"> Auto-Sort: <input type="checkbox" checked=checked onclick="sortable(this)" ></input></div>
  3. <div style="margin-top:50px;overflow:auto;">
  4.  <ul id="sortable" style="">
  5. <li > test1</li>
  6. <li > test2</li>
  7. <li > test3</li>
  8.  </ul>
  9. </div>
  10. </body>
The first function is a switch, when checked it sorts, when not checked, it doesn't sort. 

The only thing that I am having a problem with is the fact that when I make it dragable AFTER being sortable, I'm stuck with the object going to top:0; left:0; being offset from my mouse severely.

There is plenty of other code that goes with this, but these are the parts that matter to this and the rest is code being developed for a project, and I actually need the wrapping div. 

Any ideas?