如何在具有 contentEditable 的元素上启用“可拖动”?

Posted

技术标签:

【中文标题】如何在具有 contentEditable 的元素上启用“可拖动”?【英文标题】:How can I enable 'draggable' on a element with contentEditable? 【发布时间】:2011-06-24 17:01:17 【问题描述】:

我想要一个使用 jQuery UI 同时可编辑和可拖动的 div。内容可编辑性似乎仅在未启用可拖动时才有效。我错过了什么吗?我正在使用 jQuery 1.4.4 和 jQuery UI 1.8.9

javascript

$(function()
    $('#draggable').draggable();
);  

html

<div contenteditable="true" id="draggable">TEXT</div>

【问题讨论】:

您使用的是哪个可编辑插件? 它不是插件 - contenteditable 只是 HTML5 属性 【参考方案1】:

虽然 Krule 提供的答案可行,但存在可用性问题。单击时,光标将始终出现在可编辑区域的开头。这使得无法用鼠标选择文本。跳转到文本区域的唯一方法是使用箭头键。我不认为这是可以接受的。

我能想到的唯一解决方案是使用“手柄”进行拖动:

<style>
.positionable 
    position:absolute;
    width:400px; height:200px;

.drag_handle 
    position:absolute;
    top:-8px; left:-8px;
    background-color:#FFF; color:#000;
    width:14px; height:14px;
    cursor:move;
    font-size:14px; line-height:14px;
    font-weight:bold;
    text-align:center;
    border:1px solid #000;

.editable 
    outline:none;
    width:100%; height:100%;

</style>

<div class="positionable">
    <div class="drag_handle">+</div>
    <div class="editable" contentEditable="TRUE">type here...</div>
</div>

<script>
    $('.positionable').draggable(handle: '.drag_handle');
</script>

【讨论】:

有用的sn-p。我担心我是唯一一个有问题的人,显然所有问题都已经被问过/回答了。【参考方案2】:

它正在工作,但 jQuery 可拖动对象正在劫持点击事件。您仍然可以选择它。这是一个快速修复。

$('#draggable').draggable().bind('click', function()
  $(this).focus();
)

【讨论】:

这样做的问题是 focus() 将光标设置在开头,而不是点击它的位置。【参考方案3】:

您可以给这个 div 一个“父 div”并将draggable 事件添加到它的父级。然后使用官方 API 'cancel'

HTML:

<div id="draggable">
    <div contenteditable="true" class="editable">TEXT</div>
</div>

JS:

 $('#draggable').draggable(cancel: '.editable');

【讨论】:

【参考方案4】:

这让我发疯了 - 但有一种方法可以在没有拖动手柄的情况下做到这一点。 为您的可编辑元素使用不同的标签,并防止该元素被 拖着 http://api.jqueryui.com/draggable/#option-cancel

【讨论】:

以上是关于如何在具有 contentEditable 的元素上启用“可拖动”?的主要内容,如果未能解决你的问题,请参考以下文章

如何从 contenteditable 中获取“插入符号位置”?

如何使用 html 子元素在 contenteditable div 中获取插入符号位置?

如何让contenteditable元素只能输入纯文本

如何将光标位置放在 contenteditable 元素的居中对齐占位符的开头?

如何让contenteditable元素只能输入纯文本 00 张鑫旭

如何在我的angularjs指令中切换属性的值,如contenteditable?