在我對可調整大小和可排序元素的 JQueryUI 測驗中，當我嘗試動態添加物件時，它失去了調整大小的能力。當它靜態包含在 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 >'
' <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"));
});
});
代碼 https://codepen.io/sandeepzgk1/pen/zYjqWZP
uj5u.com熱心網友回復：
考慮以下。
$(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 不起作用，我仍在關注它。當您將動態專案添加到 sortable 時，您必須refrsh串列。此外，您不能將 resizble 分配給尚不存在的元素。這就是為什么它不適合你的原因。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/534390.html