通过jQuery UI在行内的动态列中删除元素

起初我将Row （带有rowDashboard类的div）添加到content （带有content id的div）。这会在Row创建三列（div类和列类），如下所示：

然后我想将Button （带有buttonDashboard类的div）添加到jQuery UI中的拖放columns ，如下所示：（ jsfiddle ）

HTML

 
Row
 
Button
 
 

脚本

 var rowIndex = 0; var buttonIndex = 0; $(init); function init() { var $id = 1; $('.rowDashboard').draggable({ containment: '#content', cursor: 'move', helper: addNewRow, revert: "invalid", }); $('#content').droppable({ accept: ".rowDashboard", drop: function (ev, ui) { ui.helper.attr('style', ''); $(ui.helper).addClass('rowDraggable'); $item = $(ui.helper).clone(); $item.appendTo('#content'); }, }); //------- buttonDraggable ----------- $('.buttonDashboard').draggable({ containment: '#content', cursor: 'move', helper: addNewButton, }); } function addNewButton() { buttonIndex++; return ' '; } function addNewRow() { var row = $(document.createElement('div')); generateColumns('4-4-4', row); return row; } function generateColumns(subType, row) { var columns = subType.split('-'); for (var i = 0; i < columns.length; i++) { $col = $(document.createElement('div')); var cssClass = getCssClassColumn(columns[i]); $col.addClass(cssClass); // Allow droppable enableDroppable($col); row.append($col); } } function enableDroppable($item) { $item.droppable({ accept: ".buttonDashboard", drop: function (ev, ui) { alert('ok'); ui.helper.attr('style', ''); $item = $(ui.helper).clone(); $item.appendTo($(this)); }, }); } // Get column class function getCssClassColumn(type) { var cssClasses = { '12': 'col-sm-12 column', '6': 'col-xs-6 column', '4': 'col-xs-4 column', 'default': 'col-sm-12 column' }; return (cssClasses[type] || cssClasses['default']); } 

但我不知道为什么button不会添加到column 。

如果有人可以解释这个问题的解决方案，将会非常有帮助。