How do i place the first dragged item of JQuery Sortable in a dynamically generated div on beforeStop event

Question

So, the issue is, i have my sortables placed into accordion categories, like this:

http://i.stack.imgur.com/UiRKa.jpg

The accordion categories are not sortable, just the tags inside them, and i have the left container connected to the container on the right.

I'm actually checking the tag category when i drop it on the "What i want" container, i do this because i want to create a identical accordion category on the "What i want" container, with the tag i dragged, inside of it.

The problem is, when i drag the tag and generate the accordion, it works! but not for the first time, only from the second attempt.

This don't work for the first time because i can't figure out a way to generate the accordion on the "What i want" container BEFORE the dragged tag, so it can be dropped on the accordion.

Here is my code:

beforeStop: function(event, ui) {

  var categ = ui.item.attr('data-categoria');
  console.log("Categoria do Objeto: " + categ);

  if (categ == 'credenciamento') {
    var container = $("#documentos_usados");
    var newdiv = $("#doc_usado_credenciamento");
    if (container.find(newdiv).length == 0) {
      var div_credenciamento = "<div id='doc_usado_credenciamento' class='single-doc'><div class='title-single-doc'>Credenciamento</div></div><div><ul id='documentos_disponiveis' class='sub-accordion-doc allow-sort' style='margin-top:0px !important'></ul></div>";
      container.append(div_credenciamento);
      newdiv.append(ui.item);
    };
  }
}

I do not know if the information I spent help fully, if not, I update the post with what you ask.

Also, sorry for any english errors, it isn't my native language.

Thanks you all!

Answer 1

Hey there is a drop event available. So instead of beforeStop you actually have to call the drop function. This method will be called prior to stop. So you can do like this :

function drop (event, ui){
var categ = ui.item.attr('data-categoria');
  console.log("Categoria do Objeto: " + categ);

  if (categ == 'credenciamento') {
    var container = $("#documentos_usados");
    var newdiv = $("#doc_usado_credenciamento");
    if (container.find(newdiv).length == 0) {
      var div_credenciamento = "<div id='doc_usado_credenciamento' class='single-doc'><div class='title-single-doc'>Credenciamento</div></div><div><ul id='documentos_disponiveis' class='sub-accordion-doc allow-sort' style='margin-top:0px !important'></ul></div>";
      container.append(div_credenciamento);
      newdiv.append(ui.item);
    };
  }
}

I can only help you with where you have to put the code. You have to make the logic what you want yourself. Else I would need a proper idea of the UI elements selectors.