Search jQuery

jQuery Forum

gaz.hopki..

Droppable within a droppable

in Using jQuery UI • 11 years ago

I am trying to develop a page layout editor using PHP and jQuery/jQuery UI. I have created a page with a number of divs which represent the containers on each page. I have used the draggable and droppable functions to create a repository of elements that can be put in these containers.

The problem I have is when I try to add a 'inner container' for the purpose of dropping the elements into I can get the newly formed elements to become droppable.

What happens is you drag a text representation of a column to the desired container. This appends a div with a class and a unique id to that container. I then try to make the new container 'droppable' but whenever dropping other elements into that new container it just goes into the parent container.

$("#example_left_col").droppable( {
drop: function(ev, ui){
id_el = ui.draggable.attr("id");
var pattern = new RegExp("^col_");
if(ui.draggable.attr("id").match(pattern)){
$("#sel_col_"+id_el+col_count).droppable( {
drop: function(ev, ui){
var id_el = ui.draggable.attr("id");
//alert(ui.draggable.attr("id"));
var pattern2 = new RegExp("^col_");
var pattern3 = new RegExp("^sel_");
if(ui.draggable.attr("id").match(pattern2)){
//alert("Cannot place columns within columns");
}else{
                                    $("#"+id_el+col_count).append("<div class='selected_option' id='sel_col_
"+ui.draggable.attr("id")+" -- Click to delete</div>");
                                    ui.draggable.draggable("disable");
                                    ui.draggable.css({opacity: 0.5});
                              }
                        }
                  } )
                  col_count++;
            }else{
                  //alert("NON-COLUMN");
                  $(this).append(""+ui.draggable.attr("id")+" -- Click to delete");
                  ui.draggable.draggable("disable");
                  ui.draggable.css({opacity: 0.5});
            }
       $(this).enableRemover(ui.draggable.attr("id"));
      }
} );