contenteditable 不适用于可拖动功能答案

【问题标题】：contenteditable is not working with draggable featurecontenteditable 不适用于可拖动功能
【发布时间】：2016-06-05 04:50:31
【问题描述】：

在这段代码中contenteditable 不起作用，我在这里犯了什么错误？
我想要在这个 div 中有多个 contenteditable 元素。

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #element { width: 150px; height: 150px; padding: 0.5em; }
  </style>
</head>
<body>


<div style="width:500px;height:500px;border:1px solid;"> 
    <div id="element" class="ui-widget-content">
      <p contenteditable='true' style="border:1px solid;">Drag me around</p>
    </div>
</div>


</body>
</html>

【问题讨论】：

请说明什么实际上不起作用以及您希望它做什么。
实际上，使用您提供的代码，contenteditable 工作得很好。您忽略了包含使元素可拖动的 Javascript 代码。

标签： jquery jquery-ui contenteditable resizable

【解决方案1】：

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #element { width: 150px; height: 150px; padding: 0.5em; }
  </style>
</head>
<body>


<div style="width:500px;height:500px;border:1px solid;"> 
    <div id="element" class="ui-widget-content">
      <p contenteditable='true' style="border:1px solid;">Drag me around</p>
    </div>
</div>


</body>
</html>

【讨论】：