Drag element from sortable list and drop to non-sortable block

Drag an element from a sortable list and drop it to a block where elements are non-sortable but draggable.

Is there anyone know how to achieve this effect in Jquery?

<div id="viewpot">
    <div id="sortable">
        <div class="draggable">A</div>
        <div class="draggable">B</div>
        <div class="draggable">C</div>
        <div class="draggable">D</div>
    </div>
    <div id="dropArea">
    </div>
</div>

use the jquery draggable ui

You will want to make one list draggable and the target sortable.

Markup:

<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

JavaScript:

  $(function() {
    $( "#sortable" ).sortable({
      revert: true
    });
    $( "#draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
  });

Happy coding!