jQuery-ui weird behavior with sortable after an element is dropped

Question

I'm building a system that would allow a user to drag and drop elements from a dragzone to a dropzone. Once dropped, the elements are cloned "back" to their origin. Also, the user can sort the elements dropped as he wants.

I had a first issue where I couldn't clone the block I dragged, but I could sort it when it was dropped. Now that I fixed the clone problem, if I try to sort the elements, the elements moving come from the dragzone and I can't understand why.

Here is the HTML:

<div class="container-fluid">
    <div class="row">
        <div class="card col-3">
            <div class="card-body">
                <div class="card draggable-element" data-target="textarea">
                    <div class="card-body">
                        This is some text within a card body. 1
                    </div>
                </div>
                <div class="card draggable-element" data-target="textfield">
                    <div class="card-body">
                        This is some text within a card body. 2
                    </div>
                </div>
                <div class="card draggable-element" data-target="fileinput">
                    <div class="card-body">
                        This is some text within a card body. 3
                    </div>
                </div>
            </div>
        </div>

        <div class="card col-6 offset-1">
            <div class="card-body dropzone">

            </div>
        </div>
    </div>



</div><!-- /.container -->

And here is the JS:

$(document).ready(function() {
    $('.draggable-element').draggable({
        revert: 'invalid',
        appendTo: '.dropzone',
        helper: 'clone'
    });

    $('.dropzone').droppable({
        drop: function (event, ui) {
            // With the following code, the elements won't get cloned
            var item = $(ui.draggable);
            if(!item.hasClass('copy')) {
                item.clone().addClass('copy');
                item.draggable({
                    revert: 'invalid',
                    stack: ".draggable",
                    helper: 'clone'
                })
            }
            else {
                $(this).append($(ui.helper).clone());
            }
            $(this).append(item);
        }
    })
    .sortable();

});

/*
        drop: function (event, ui) {
            // With the following code, the elements getting sorted are 
            // the div.draggable-element from the div.card.col-3
            $(ui.draggable).clone(true).detach().css({
                position: 'relative',
                top: 'auto',
                left: 'auto'
            }).appendTo(this);
        }
 */

I haven't used jquery-ui for a while so I can't find what may be obvious, I tried to mix the code together but it didn't end up well at all.

Thank you in advance

Answer 1

OK, this is likely NOT a full answer ( but the markup had an odd "card-body" holder of cards so I renamed that to test. Does Not "clone" as was represented in the question...so it sorts in my example but not sure this totally reproduces/resolves here. I updated the "clone" part but not sure it is what you desire.

$(document).ready(function() {
  $('.draggable-element').draggable({
    revert: 'invalid',
    appendTo: '.dropzone',
    helper: 'clone'
  });

  $('.dropzone').droppable({
      drop: function(event, ui) {
        // With the following code, the elements won't get cloned
        var item = $(ui.draggable);
        // hide to not obscure console.log(item.length);
        if (!item.hasClass('copy')) {
          var newy = item.clone(false);
          newy.addClass('copy');
          //console.log(newy);
          newy.draggable({
            revert: 'invalid',
            stack: ".draggable",
            helper: 'clone'
          });
        } else {
          $(this).append(item);
        }
          $('.dropzone').append(newy);
       // $(this).append(item);
      }
    })
    .sortable();

});

.cards,
.dropzone {
  border: solid red 1px;
  height: 5em;
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="card col-3">
      <div class="cards">
        <div class="card draggable-element" data-target="textarea">
          <div class="card-body">
            This is some text within a card body. 1
          </div>
        </div>
        <div class="card draggable-element" data-target="textfield">
          <div class="card-body">
            This is some text within a card body. 2
          </div>
        </div>
        <div class="card draggable-element" data-target="fileinput">
          <div class="card-body">
            This is some text within a card body. 3
          </div>
        </div>
      </div>
    </div>
    <div class="card col-6 offset-1">
      <div class="card-body dropzone">
      </div>
    </div>
  </div>
</div>