如何使用 Jquery 使未来的元素可拖动

Question

我正在阅读下面的 api 将使页面上当前可用的元素可拖动。

$( ".draggable" ).draggable({ containment: "parent" });

但在我的情况下，我将根据用户操作构建新元素。就像我将允许他们在应该可以拖动的图像上插入一个文本框。

有没有一种机制可以让我使用 jquery 使用“.on()”附加这个可拖动的功能？

或

每次创建新元素都要执行$( "this" ).draggable({ containment: "parent" });？

感谢阅读

Answer 1

有没有一种机制可以让我使用 jquery 使用“.on()”附加这个可拖动的功能？

不（嗯，技术上是的），您必须在创建每个元素后或在创建后发生某些事件（例如 mouseenter）后使每个元素可拖动

$(document).on("mouseenter", ".draggable:not(.initiated)", function() {
    $(this).draggable({ containment: "parent" }).addClass("initiated");
});

启动的类可以防止每次鼠标悬停时重新初始化可拖动对象。

注意，你应该使用比 document 更好的祖先，因为 mouseenter 是一个经常在文档上发生的事件（任何时候 dom 中的任何元素被鼠标插入都会发生）。