How can I make dynamic JQueryUI elements sortable and resizable?

Question

In my JQueryUI test of resizable and sortable elements when I attempt to add objects dynamically, it loses its ability to be resized. It works well when it is statically included in the HTML DOM.

HTML

<button id="content">click</button>
<div class="row-fluid" id="sortable"></div>

CSS

.sort_container {
  transition: all 0.1s linear;
  min-width: 150px;
  max-width: 400px;
  min-height: 250px;
  max-height: 250px;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-left: 10px;
  float: left;
  position: relative;
  cursor: grab;
  background-color: rgba(240, 240, 240, 0.3);
}

#segrip {
  width: 10px;
  height: 35px;
  background-color: #888;
  bottom: 5px;
  right: -5px;
  border-radius: 8px;
  position: absolute;
  cursor: ew-resize;
}

JS

  var customElement =
  "" +
  '<div class="span6 sort_container">' +
  '    <div class="well">1</div>' +
  '    <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>' +
  "</div>" +
  "";

$(document).ready(function () {
  $(function () {
    $("#sortable").sortable();
  });

  $(".sort_container").resizable({
    handles: {
      se: ".ui-resizable-se"
    }
  });
  $("#content").on("click", function (e) {
    $(customElement).appendTo($("#sortable"));
  });
});

Code https://codepen.io/sandeepzgk1/pen/zYjqWZP

Answer 1

Consider the following.

$(function() {
  function makeCard() {
    var index = $(".sort_container").length + 1;
    var el = $("<div>", {
      class: "span6 sort_container"
    });
    $("<div>", {
      class: "well"
    }).html(index).appendTo(el);
    $("<div>", {
      id: "segrip-" + index,
      class: "ui-resizable-handle ui-resizable-se"
    }).appendTo(el);
    return el;
  }

  $("#sortable").sortable();

  $("#content").on("click", function(e) {
    var customElement = makeCard();
    customElement.appendTo("#sortable");
    customElement.resizable({
      handles: {
        se: ".ui-resizable-se"
      }
    });
    $("#sortable").sortable("refresh");
  });
});

.sort_container {
  transition: all 0.1s linear;
  min-width: 150px;
  max-width: 400px;
  min-height: 250px;
  max-height: 250px;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-left: 10px;
  float: left;
  position: relative;
  cursor: grab;
  background-color: rgba(240, 240, 240, 0.3);
}

[id^=segrip-] {
  width: 10px;
  height: 35px;
  background-color: #888;
  bottom: 5px;
  right: -5px;
  border-radius: 8px;
  position: absolute;
  cursor: ew-resize;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/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.2/jquery-ui.js"></script>
<button id="content">Click</button>
<div class="row-fluid" id="sortable"></div>

Resizable is not working and I am still looking at that. When you add dynamic items to sortable, you must refrsh the list. Also you cannot assign resizble to an element that does not yet exist. This is why it was not working for you.