Unable to drop elements in between dropped fields

Question

I have some draggable elements I have some dropped Fields, I can drop the elements into droppable areas easily. But unable to drop the elements from one dropped field to another

Here is Jsfiddle Demo

To see fiddle how it working

1. click on add div two times to add two grey divs
2. drag green div to first grey div, it works fine
3. when you try to drag the green elements from first grey div to second grey div, you are unable to this, this is bug

Here is Jquery

$(function () {
    $(".selectorField").draggable({
        containment: $('body'),
        helper: "clone",
        stack: "div",
        cursor: "move",
        cancel: null
    });

    function makeDraggable($sel) {
        $sel.draggable({
            containment: $('.droppedFields'),
            cursor: "move",
        });
        $sel.find('.resize_box').resizable({
            handles: {
                'e': '.ui-resizable-e'
            }
        });
    }

    var i = 1;
    $("#AddSec").click(function () {
        $("<div />", {
            "class": "wrapper"
        })
            .append($('<span />', {
            "class": "DelSection",
            "data-target": "#Section" + i
        }).html('(-)Remove'))
            .appendTo("#data");
        $("<div />", {
            "class": "SecStyle",
            id: "Section" + i
        })
            .append($("<div/>").attr('class', 'well droppedFields').droppable({

            accept: ":not(.not_clone)",

            drop: function (event, ui) {
                var draggable = ui.draggable;
                draggable = draggable.clone();
                draggable.addClass('not_clone');
                draggable.appendTo(this);
                $(ui.draggable).hide();


                draggable.click(function (e) {

                    if ($(this).hasClass('is_sort')) {
                        $('.selectorField').removeClass('is_sort');
                        e.preventDefault();
                        return;
                    }

                    if (!$(e.target).is('.ui-resizable')) {

                        // alert("First");
                        $(this).remove();
                        $(ui.draggable).show();
                    }
                });
            }
        }).resizable({
            handles: 'e'
        }))
            .appendTo("#data");
        $(".droppedFields").sortable({
            start: function () {
                $('.selectorField').addClass('is_sort');
            }
        }).disableSelection();
        i++;
    });
    var is_sort = false;

    //delete the columns from section

    //delete the section
    $("#data").on('click', '.DelSection', function () {
        var targetSection = $(this).data('target');
        $(targetSection).remove();
        $(this).parent().remove();
    });
});

Answer 1

Solved Myself By Changing

$(".droppedFields").sortable({
            start: function () {
                $('.selectorField').addClass('is_sort');
            }
        }).disableSelection();

To

  $(".droppedFields").sortable({
                start: function () {
                    $('.selectorField').addClass('is_sort');
                }, 
           connectWith: ".droppedFields"
            }).disableSelection();

Demo Fiddle