如何使用Jquery使future元素可拖动

Question

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

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

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

是否有一种机制可以使用“.on（）”使用jquery附加此可拖动功能？

OR

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

感谢您阅读

Answer 1

  

是否有一种机制可以使用“.on（）”使用jquery附加此可拖动功能？

否（技术上是肯定的），你必须在创建它之后使每个元素可拖动，或者在创建它之后发生的某些事件之后（例如mouseenter）

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

启动的类会阻止每次鼠标悬停时重新初始化拖动。

注意，您应该使用比文档更好的祖先，因为mousenter是一个经常发生在文档上的事件（将在dom中的任何元素被填入的任何时候发生）。