I have Jquery code to drag and drop elements to a work_area div with works perfectly fine. But when I try to apply the same function to a preloaded DOM element the draggable function using another draggable() function on document ready, the preloaded elements are draggable within the work area but the new elements are not.

For Better understanding here's the code:

Code to drag & drop new elements:

function dragger() {
    $(".draggable").draggable({
      revert: "invalid",
      containment: "#work_area_div_sub",
      helper: "clone",
      cursor: "move"
    });

    $(".draggable2").draggable({
      revert: "invalid",
      containment: "#work_area_div_sub",
      cursor: "move"
    });
console.log("here2");
    $("#work_area_div_sub").droppable({
      accept: ".draggable",
      containment: "#work_area_div_sub",
      drop: function( event, ui ) {
console.log("here3");

     ui.draggable.clone().appendTo($(this)).draggable().removeClass("draggable").addClass("draggable2");
          $(".draggable2").resizable({
              handles: "n, e, s, w, se, ne, sw, nw",
              aspectRatio: true
          });
    });
} 

$(document).ready(function() {
  dragger();
});

Please note that the above code lets drag and drop (clones) elements with class name draggable into work_area div, which further can be draggable within the work_area div. And works perfectly fine.

While, when I apply the same to the preloaded elements with class draggable2 using the below code:

function dragger_idle() {
    $(".draggable2").draggable({
      revert: "invalid",
      containment: "#work_area_div_sub",
      cursor: "move"
    });
    $("#work_area_div_sub").droppable({
      accept: ".draggable2",
      containment: "#work_area_div_sub",
      drop: function( event, ui ) { 
          console.log("here");
      }
    });     
}

$(document).ready(function() {
    dragger_idle();
});

works fine, lets me drag pre-loaded elements that are in work_area div drag around. but the first piece of code which lets me drag and drop new elements doesn't work. But if i m to remove the dragger_idle() the dragger() function executes fully.

I tried condole.log on every possible position to check how far the function is running. yet, no idea where I messed up.

At first I thought that the $("#work_area_div_sub").droppable in draggable_idle() is messing up with $("#work_area_div_sub").droppable in draggable() but consoling it out tells me that the $("#work_area_div_sub").droppable is not at all triggering when i try to drag new elements.

Hope I was clear. Any Help is greatly appreciated.

CodePudding user response：

So, after some brain storming, I figured it out.

function dragger() {
    $(".draggable").draggable({
      revert: "invalid",
      containment: "#work_area_div_sub",
      helper: "clone",
      cursor: "move"
    });

    $(".draggable2").draggable({
      revert: "invalid",
      containment: "#work_area_div_sub",
      cursor: "move"
    });

    $("#work_area_div_sub").droppable({
      accept: ".draggable, .draggable2",
      containment: "#work_area_div_sub",
      drop: function( event, ui ) {

        if((ui.draggable).hasClass('draggable2')) { } else { 

           //whatever we wanna do with the new drag drop elements

        }
     }
   });
}

So, what I exactly did was,

• told the #work_area_div_sub div to accept both classes draggable and draggable2
• And while adding the clone or other functions to the dropped element, added an if to check whether it's a draggable or the other.
• and finally added parameters accordingly.

To be frank, although no answers rolled in, stack really did help me understand my own problem in a different way to solve it by myself by writing it down. So. thanks SO.