jQuery-UI sortable / droppable

Question

I'm creating an interface so users can drag and drop elements, but also sort them afterwards. The drag / drop / sort functions work smoothly, however, when I'm trying to sort the dropped elements in the "dropzone", instead of the element I'm trying to drag, it's the element source that is moving. It took some times but I figured out that it's because of .clone(true) or .clone(false) that this kind of things could happen. So I decided to remove it but now the elements that are in the sorting div seem.. broken.

Here is the HTML (bootstrap 4 context) :

<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>

And this is the JS :

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

    $('.dropzone').droppable({
        drop: function(event, ui) {
            var item = $(ui.draggable);
            if (!item.hasClass('copy')) {
                var newy = item.clone(true, true);
                newy.addClass('copy');
                //console.log(newy);
                newy.draggable({
                    revert: 'invalid'
                    , stack: ".draggable"
                });
            } else {
                $(this).append(item);
            }
            $('.dropzone').append(newy);
        }
    }).sortable({
        axis: 'y'
        , revert: true
        , refreshPositions: true
        , placeholder: 'placeholder'
        , items: '.copy'
        , forcePlaceholderSize: true
    });
});

So with parameters inside .clone(), whichever they are, most of the time, when I drag a cloned element, the original is moving instead, but sometimes it works, and I have no clue why. Without parameters, the good element is dragged but there is no notion of stacking and sorting, the element stays where I dropped it and the others kind of adapt their position to its.

Is there anyway to resolve this kind of issue?

Thank you in advance

Answer 1

You don't need to droppable and sortable method is enough because it's draggable and sortable. So you can do it like this:

$('.dropzone').sortable();

$('.draggable-element').draggable({
  connectToSortable: '.dropzone',
  revert: 'invalid',
  helper: 'clone'
});

Online demo (jsFiddle)

Answer 2

If you want move element "draggable-element", you must set as dragable "zone" card-body (higher tag). But this tag you are have twice in your html code. Check my live example.

Live demo

<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>

  <div class="card col-6 offset-1">
    <div class="card-bodyX dropzone">
      ...
    </div>
  </div>

$(document).ready(function() {
  $('.card-body').draggable({
    revert: 'invalid',
    connectToSortable: '.dropzone',
    scroll: false,
    helper: 'clone'
  });

  $('.dropzone').sortable({
    distance: 0,      
  });
});