动态生成的 DIV 缺少 class 属性

Question

我创建了一个 table 并通过生成 DIV 动态填充此 table。我希望我的 table 元素是可拖动的，所以我使用 Jquery.Ui，这需要使用正确的名称指定 class，以便可以拖动它。但是我发现只有第一个 DIV 有这个 class 而其他生成的没有这意味着它们不能被拖动。

我的代码。

while ( $row = mysqli_fetch_array ( $result ) ) {
                    echo '<div id="Cell" class="ui-widget-content">';
                    echo '<input type="checkbox" name="tbl" id="tblst"   value="' . $row [0] . '"  />';
                    echo '<p>' . $row [0] . '</p>';
                    echo '</div>';
                }

通过检查元素输出。

如何解决这个问题，使生成的所有元素都可以拖动？

Answer 1

您的 JS 正在按 ID 定位元素

$('#Cell').draggable()

因此假设只有一个元素名为#Cell。删除 Id Cell，因为它无效 HTML，并以这种方式回显：

echo '<div class="draggable-cell ui-widget-content">';

并将 JS 更改为目标 class：

$('.draggable-cell').draggable()

现在它将定位多个元素。

Answer 2

我相信你会希望在某个时候能够追踪细胞，所以请试试这个：

<div id="FirstRow" class="Row"></div>

有了这个javascript:

function createCells() {
    var counter = 0;
    while ($row = mysqli_fetch_array($result)) {
        $("#FirstRow").append('<div id="cell_' + counter + '" class="ui-widget-content"><p>' + $row[0] + '</p></div>');
        counter++;
    }
    $("#FirstRow").children().draggable();
}
$(function () {
    createCells();
});

JSFiddle Link to code

动态生成的 DIV 缺少 class 属性

Dynamically generated DIVs missing class attribute

html

javascript

css

jquery

jquery-ui