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>

但是现在的问题是，当我单击跨度时，我想将光标放置在想要的任何地方，但是从现在开始，当我单击它时，光标始终位于开头。我应该怎么做？我在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>

jQuery UI的可拖动文本字段

1 个答案: