How can I make dynamic JQueryUI elements sortable and resizable?-CodePudding

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

  var customElement =
  ""  
  '<div >'  
  '    <div >1</div>'  
  '    <div  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

CodePudding user response：

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