我使用draggable和sortable。但是我希望每次我在面板中拖动时都会创建新的div,并且当我将项目放入其中时创建这个div。当我把它放到其他div时删除。但是当我创建div时。它不能放置物品。请帮我 请参阅我的代码http://jsfiddle.net/oyx05qae/
感谢您的帮助。
<script type="text/javascript">
$(document).ready(function() {
add_sortable();
});
function add_panel(array) {
var panel_id = array.panel_id!='undefined' ? array.panel_id : array['panel_id'];
$('.inside_all_panel').append('<div data-paid="'+panel_id+'" style="width:'+array.panel_width+';height:'+array.panel_height+'" class="panel_show module_go"></div>');
}
function add_sortable(){
$('.module_go').sortable({
connectWith: '.inside_all_panel .module_go',
tolerance:'pointer',
dropOnEmpty: true,
revert: true,
placeholder: 'portlet-placeholder',
stop: function(event, ui) {
$('.module_delete').hide();
console.log("stop item "+ui.item.parent().data('paid'));
},
start:function(event, ui) {
$('.module_delete').show();
console.log("start item "+ui.item.parent().data('paid'));
$(".module_go").sortable('refresh');
},
});
$(".module-list").draggable({
connectToSortable: ".inside_all_panel .module_go",
helper: "clone",
revert: "invalid",
start: function(event, ui) {
var array = new Array();
array['panel_id'] = 'holder';
array['panel_width'] = '10%';
array['panel_height'] = 'auto';
add_panel(array);
add_sortable();
$(".module_go").sortable('refresh');
},
stop: function(event, ui) {
$('div[data-paid="holder"]').remove();
},
});
}
</script>