Перетащите пользовательский интерфейс с помощью меню

Question

Я попытался использовать функцию перетаскивания вместе с пользовательским интерфейсом меню, используя jquery. В этом случае, когда я перетаскиваю div в другом контейнере, мне нужно добавить div с пользовательским интерфейсом меню, это я и сделал. Но это не работает для меня должным образом. Такие вопросы, как скрытие div подменю внутри контейнера, множественный div с тем же интерфейсом, к которому пользователь не может получить доступ, после обновления контейнера перетаскиванием div с подменю не работает. Может кто-нибудь помочь мне в разъяснении ошибок , Спасибо заранее [введите описание изображения

 function insert_del_dragged() {

var OrderAttrib = {};
OrderAttrib.Dashboardid = dashboardid
OrderAttrib.Frameid = frameid
OrderAttrib.Columntype = columntype
OrderAttrib.Columnid = columnid
OrderAttrib.Aggregate = aggregate
OrderAttrib.Param = insertdel
OrderAttrib.Userid = userid

var data = JSON.stringify(OrderAttrib)

$.ajax({
    type: "POST",

    url: "WebService.asmx/idb_frame_column_details",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: JSON.stringify({ Data:data}), //Parameter
    async: true,
    cache: false,
    timeout: 500000,
    success: function (msg) {

        // alert(msg.d);
        framecolumnid = '';

        data = JSON.parse(msg.d)
        framecolumnid = JSON.parse(data)

        if (columnname == 'Dimension') {
            $("#clone" + columnid).replaceWith('<div id = "menu-5' + framecolumnid[0].id + '"><div id="' + framecolumnid[0].id + '" class=draggable_dim name="' + columnname + '" value="' + aggregate + '" type="' + columntype + '"><a>' + columnaliasname + '</a> <ul><li><a>Aggregate</a><ul><li><a>Sum</a></li><li><a>Avg</a></li><li><a>Min</a></li></ul></li><li><a>Chart</a><ul><li><a>Line</a></li><li><a>Bar</a></li><li><a>Scatter</a></li></ul></li><li><a>Number</a><ul><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li></ul></li></ul></div></div>')
            //$("#clone" + columnid).replaceWith(' <div id = "menu-5' + framecolumnid + '"><div id="' + framecolumnid + '" class=draggable3  name="' + columnname + '" value="' + columnvalue + '"  ><a>' + columnaliasname + '</a> <ul><li><a>Aggregate</a><ul><li><a>Sum</a></li><li><a>Avg</a></li><li><a>Min</a></li></ul></li><li><a>Chart</a><ul><li><a>Line</a></li><li><a>Bar</a></li><li><a>Scatter</a></li></ul></li><li><a>Number</a><ul><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li></ul></li></ul></div></div>')

        }
        else {
            $("#clone" + columnid).replaceWith('<div id = "menu-5' + framecolumnid[0].id + '"><div id="' + framecolumnid[0].id + '" class=draggable_msr name="' + columnname + '" value="' + aggregate + '" type="' + columntype + '"><a>' + columnaliasname + '</a> <ul><li><a>Aggregate</a><ul><li><a>Sum</a></li><li><a>Avg</a></li><li><a>Min</a></li></ul></li><li><a>Chart</a><ul><li><a>Line</a></li><li><a>Bar</a></li><li><a>Scatter</a></li></ul></li><li><a>Number</a><ul><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li></ul></li></ul></div></div>')

        }

        drag();
        test(framecolumnid[0].id);

       loadframedetails(columndata, rowdata, sizedata, tooltipdata, labeldata, charttype)
    }
    //error: function (jqXHR, textStatus, errorThrown) {
    //    console.log("error " + textStatus);
    //    console.log("incoming Text " + jqXHR.responseText);
    //    if (textStatus == 'timeout') {
    //        alert('Failed from timeout');
    //        //Showstate()
    //    }
    //    else {
    //        var err = jqXHR.responseText
    //        var n = err.indexOf(",");
    //        var m = err.indexOf(":");
    //        alert(err.substring(m, n))
    //    }

    //}
});

}

function test(framecolumnid) {
var framecolumnid = framecolumnid

    $('#menu-5' + framecolumnid).menu(

        {
            //position: { my: "left top", at: "right bottom" },
            //position: { my: "right top", at: "right-10 top+5" },
            //submenu: "ui-icon-circle-triangle-e",


            position: { my: "left top", at: "right bottom" },


        }
        );}

после обновления, элемент, помещенный в контейнер, не может быть просмотрен как удаленный с меню (при этом меню класса работает неправильно )

if (col_type == 'column') {

                    if (col_name == 'Dimension') {

                        column_content += '<div id="' + id + '" class="draggable_dim" name="' + col_name + '" value="' + col_aggregate + '" type="' + col_type + '"   >' + col_aliasname + '</div>'
                        columndata.push(col_aliasname);
                    }
                    else {
                      //  $("#clone" + columnid).replaceWith('<div id = "menu-5' + framecolumnid[0].id + '"><div id="' + framecolumnid[0].id + '" class=draggable_msr name="' + columnname + '" value="' + aggregate + '" type="' + columntype + '"><a>' + columnaliasname + '</a> <ul><li><a>Aggregate</a><ul><li><a>Sum</a></li><li><a>Avg</a></li><li><a>Min</a></li></ul></li><li><a>Chart</a><ul><li><a>Line</a></li><li><a>Bar</a></li><li><a>Scatter</a></li></ul></li><li><a>Number</a><ul><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li></ul></li></ul></div></div>')

                        column_content += '<div id = "menu-5' + id + '"><div id="' + id + '" class="draggable_msr" name="' + col_name + '" value="' + col_aggregate + '" type="' + col_type + '"  ><a>' + col_aliasname + '</a> <ul><li><a>Aggregate</a><ul><li><a>Sum</a></li><li><a>Avg</a></li><li><a>Min</a></li></ul></li><li><a>Chart</a><ul><li><a>Line</a></li><li><a>Bar</a></li><li><a>Scatter</a></li></ul></li><li><a>Number</a><ul><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li></ul></li></ul></div></div>'
                        test(id);
                        columndata.push(col_aliasname);

                    }

используется ссылка

 <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
     rel = "stylesheet">

  <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>