HTML5：使可编辑的文本区域可拖动而没有副作用？

Posted 2023-05-08

【中文标题】HTML5：使可编辑的文本区域可拖动而没有副作用？

【英文标题】：HTML5: make an editable textzone draggable with no side-effect?

【发布时间】：2012-07-30 07:04:15

【问题描述】：

我目前正在开发一个 Web 应用程序，在该应用程序中，我将拥有一个包含可编辑文本区域列表的页面，并且我希望能够更改它们的顺序，只需将每个文本区域拖放到所需位置即可.

基本上，这些文本区域中的每一个都会嵌套在 中，如下所示：

<div class="outsideDiv">
    <div>
        <textarea>

        </textarea>            
    </div>       
</div>

当我尝试使用原生 html5“可拖动”属性（更准确地说，我把它作为我最外面的属性）来实现拖放功能时，我注意到这会使我的文本区域可拖动但也会产生副作用：每当我点击文本区域时，打字光标总是在位置 0。因此，不可能将光标移动到另一个位置，如果您想编辑现有文本，这不是那么方便.

所以我的问题是，我怎样才能使文本区域可拖动，同时保留其所有功能（我的意思是，没有提到的副作用）？

【问题讨论】：

仅供参考，另一个不起作用的功能是文本选择

看起来像浏览器错误 :(。在 chrome 中运行相当流畅 jsfiddle.net/nDjYy

@Rene Geuze，非常感谢您指出这个方向。绝对有助于让我对要使用的技术有所了解。

【参考方案1】：

看看jQuery-ui中的可拖动效果(http://jqueryui.com/demos/draggable/)