jqueryjquery-uijquery-ui-sortablejquery-ui-draggable

Unable to remove items after dragging them on dynamically created list

I created a field editor where you can create several blocks via drag & drop and they are cloned, because you can use as much blocks as you want. Then there is the chance to put in fields from a list on the left side.

This works fine so far.

<div class="draggable">

  <h2>Structure</h2>
  <div class="structure">
    <div class="item1 block e1" data-class="e1">New block</div>
    <div class="item1 headline e2" data-class="e2">New headline</div>
  </div>

  <h2>Fields</h2>
  <div class="fields item1">
    <div class="item2">Date</div>
    <div class="item2">Time</div>
    <div class="item2">Relation</div>
    <div class="item2">Text</div>
  </div>

</div>

<div class="sortable"></div>

My script looks like this:

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

$(".sortable").sortable({
  receive: function (event, ui) {
    var itemClass = $(ui.item).attr("data-class");
    $(".sortable ." + itemClass).css(
      { height: "auto", width: "auto" }
    );
  }
});

$(".fields").sortable({
  connectWith: ".sortable .block",
  items: ".item2"
});

Unfortunately it's not possible to remove fields from a block on the right side.

Can you tell me what I have to do and why this doesn't work?

This is what my code looks like https://codepen.io/alphafrau/pen/gOvzjGj

Solution

  • When you initialize the Sortable inside the Sortable, you will want to define the connectWith option. I would suggest:

    connectWith: ".sortable .item1, .fields"

    This allows it to be moved to any of the sortable lists.

    $(function() {
  $(".structure .item1").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
    stop: function(event, ui) {
      $(".sortable .item1").sortable({
        connectWith: ".sortable .item1, .fields"
      });
    }
  });

  $(".sortable").sortable({
    receive: function(event, ui) {
      var itemClass = $(ui.item).attr("data-class");
      $(".sortable ." + itemClass).css({
        height: "auto",
        width: "auto"
      });
    }
  });

  $(".fields").sortable({
    connectWith: ".sortable .block",
    items: ".item2"
  });
});
    .draggable {
  background: #CCC;
  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;
}

.fields {
  background: aqua;
  padding: 10px;
}

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

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

.sortable .item2 {
  background: Yellow;
  border: 2px solid Orange;
  padding: 5px;
  margin: 2px;
}
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div class="draggable">
  <h2>Structure</h2>
  <div class="structure">
    <div class="item1 block e1" data-class="e1">New block</div>
    <div class="item1 headline e2" data-class="e2">New headline</div>
  </div>
  <h2>Fields</h2>
  <div class="fields item1">
    <div class="item2">Date</div>
    <div class="item2">Time</div>
    <div class="item2">Relation</div>
    <div class="item2">Text</div>
  </div>
</div>
<div class="sortable"></div>