Jquery UI - Draggable and Sortable inside the Container/ Parent Div

Question

While dragging a <div> for sorting, if I drag the any box outside of container it comes outside of container <div>. I don't want this.

I except the output is while Sorting, the dragging (ex. above green background div) <div> should not comes outside of parent/Container DIV.

Demo link

$(function () {
  $(".drag_wrapper").sortable({
    connectWith: ".drag_wrapper"
  }).disableSelection();
});

Answer 1

I think you are looking for the containment option:

$(function () {
    $(".drag_wrapper").sortable({
        connectWith: ".drag_wrapper",
        containment: ".drag_wrapper"
    }).disableSelection();
});