Question

以下是示例代码：

<div>
  Text..
  <div id="editable-editor" contenteditable="true">Some Text Here...</div>
</div>

如果在#editable-editor之后按Some Text内输入，则会为文本Here创建<div>Here...</div>元素。

如何将jquery-ui draggable类添加到<div>Here...</div>元素以使其可拖动？

Answer 1

您需要参考this SO answer。从本质上讲，没有跨浏览器保证的方式来了解何时有人将新内容添加到您的contenteditable元素。但是你可以猜到。

$("#editable-editor").keydown(function () {
   $(this).children('div').each(function () {
        $(this).draggable();
   });
});

只需听取关键事件并为您的新div添加可拖动功能。

Answer 2

请试试这个

$（'div'，'＃editable-editor'）。each（function（i）{

$（本）.addClass（ 'UI-插件内容'）; $（本）.draggable（）;

}）;

Answer 3

尝试使用keypress，change个活动，.has()，.not()

$("#editable-editor")
  .on({
    "keypress": function(e) {
      if (e.keyCode === 13) {
        $(this).append("<div>Here...</div>")
        .change()
      }
    },
    "change": function() {
      if ($(this).has("div")) {
        $("div", this).not(".ui-draggable").draggable()
      }
    }
  })

.draggable {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div>
  Text..
  <div id="editable-editor" contenteditable="true">Some Text
  </div>
</div>

如何将类添加到在contenteditable元素内创建的div？

3 个答案: