jQuery UI 的可拖动文本字段

Question

我想要一个可拖动的可编辑跨度，所以我使用了 jQuery UI draggable 特性。这是我的代码:

$(function() {
  $("#item").draggable();
});

#item {
  min-width: 25px;
  border: solid;
  display: inline-block;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<span id="item" contenteditable="true">Item</span>

但现在的问题是，当我点击 span 时，我想将光标放在我想要的任何位置，但截至目前，当我点击它时，光标始终位于开头。我应该怎么做？我在使用 Firefox Developer。

我的想法是在跨度周围添加一个边框来捕获元素，当用户点击文本时它会放置光标。

Answer 1

扩展我的评论。

$(function() {
  $(".item-wrapper").draggable({
    handle: ".handle"
  });
});

.item-wrapper {
  border: 2px solid #c2c2c2;
  border-radius: 6px;
  padding: 2px;
  background: #c2c2c2;
  display: inline-block;
}
.item-wrapper .handle {
  width: 10px;
}
#item {
  min-width: 25px;
  display: inline-block;
  background: #fff;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="item-wrapper">
  <span class="handle ui-icon ui-icon-grip-dotted-vertical"></span>
  <span id="item" contenteditable="true">Item</span>
</div>