jQuery Sortable - Drag items into previously dragged items-CodePudding

I create a drag & drop interface with input field masks based on a users choice. Therefore you can drag blocks, rearrange them and drag several fields inside of a block.

I now can create new blocks, but I'm unable to drag fields inside these blocks.

<div >

    <h2>Structure</h2>
    <div >
        <div >New block</div>
        <div >New headline</div>
    </div>

    <h2>Fields</h2>
    <div >
        <div >Date</div>
        <div >Time</div>
        <div >Relation</div>
        <div >Text</div>
    </div>

</div>

<div ></div>

My jQuery code looks like this, however I am not able drag fields to strcture elemnts I previously dragged to .sortable.

$( ".sortable" ).sortable({
    revert: true
});

$( ".item1" ).draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "invalid"
});

$( ".item2" ).draggable({
    connectToSortable: ".sortable .item1",
    helper: "clone",
    revert: "invalid"
});

$( ".sortable .item1" ).sortable({
    revert: true
});

This is my current state of this project https://jsfiddle.net/alphafrau/egcbL5nt/5/

Can anybody help me?

Kind regards Peter

CodePudding user response：

do you want like this?

$(".sortable").sortable({
    revert: true
  });

  $(".item1").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    revert: "invalid",
    stop: function(event, ui) {
      $(".sortable .item1").sortable({
        revert: true
      });
    }
  });

  $(".item2").draggable({
    connectToSortable: ".sortable .item1",
    helper: "clone",
    revert: "invalid"
  });

h1 {
  padding: 0 0 0 350px;
}

.draggable {
  background: #c9c9c9;
  border: 2px solid #666;
  padding: 0 10px;
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
  width: 300px;
}

.draggable .item1 {
  background: lime;
  border: 2px solid green;
  padding: 5px;
  margin: 2px;
}

.draggable .item2 {
  background: Yellow;
  border: 2px solid Orange;
  padding: 5px;
  margin: 2px;
}

.sortable {
  background: Orange;
  border: 2px solid OrangeRed;
  padding: 20px;
  margin: 0 0 0 350px;
}

.sortable .item1 {
  background: fuchsia;
  border: 2px solid brown;
  padding: 5px;
  margin: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div >

  <h2>Structure</h2>
  <div >
    <div >New block</div>
    <div >New headline</div>
  </div>

  <h2>Fields</h2>
  <div >
    <div >Date</div>
    <div >Time</div>
    <div >Relation</div>
    <div >Text</div>
  </div>

</div>

<div >
</div>