Javascript 跟踪文本区域中div的位置

我有一个文本区域，它可以跟踪这样一个可移动的div

    $('#content').children().draggable({ 
        drag : function () {
                $('#textarea').text("left:" +($(this).position().left) + "px" + "\ntop:" + $(this).position().top + "px");
        } 
    });

问题是，如果我在文本区域中写入内容，如果我移动div，它将停止更新位置。 如果文本区域中的文本如下所示：

布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉 左：10px 顶部：20px； 布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉

如果我移动div而不删除textarea的其他内容，我希望能够在textarea中写入并更新位置

有人应该能够在文本区域中写下他们想要的任何东西，如果他们移动它，位置将显示在他们所写内容的特定位置或末尾

有什么想法吗

使用“.val”而不是“.text”的示例： “.val”将删除现有文本

更新：根据瓦伦蒂诺的回答，我确实喜欢：

---

但如果在移动文本区域之前在文本区域中写入内容，则此操作无效。您可以保存表示变量中位置的字符串，并在拖动div时仅替换该字符串。如下所示：

var position;
var oldposition = '';

$('#content').children().draggable({
    drag: function () {       
        position = "left:" + ($(this).position().left) + "px" + "\ntop:" +     $(this).position().top + "px";
        $('#textarea').val($('#textarea').val().replace(oldposition, position));   
        oldposition = position;
    }
});

---

通常，当我做类似的事情时，我会在内容中添加替换键，并在需要准备内容时替换

<textarea>blablablabla {left: 10px} {top: 20px} blablablablabla</textarea>

---

然后，当您在服务器或客户端上准备所需的内容时，但至少结构是一致的。

您可以将位置文本括在括号内，然后在移动div时应用正则表达式并仅更改括号内的文本。这是一张工作票

---

这可能会让你开始。这只是一个粗略的设计，可能会对您有所帮助。使用了

子字符串

和

替换

javascript方法

---

您能创建一个字符串来查看您的问题吗？您能将字符串保存在一个变量中，例如，“left:10px top:20px”，并在div移动时对其进行字符串替换吗？当位置号一直变化时，替换位置号不是很困难吗？我不知道我应该用什么来替换新的位置…这很聪明，但只有在你从文本区域手动更改位置值时才起作用。谢谢，但正如roydukkey所说，如果你弄乱了数字，它将停止工作。也许你能回答这个问题？如果我在移动前在文本区域中写了一些东西，它会在开始处发布位置。是否可以将此信息发布到特定位置和/或最后一个文本区域？如果有人弄错了数字，jsfiddle.net/kCT9f/1也会重新添加。这一个将它附加到末尾，然后在后面原位替换它——但对数字混乱的情况没有帮助。你可以比较文本，看看是否发生了混乱，然后重新添加。这个解决方案的问题是你必须有这些括号，有人应该可以在文本区域中写任何他们想要的内容，如果他们移动了它，该位置将显示在一个特定的位置或他们所写内容的末尾。在移动textarea时，是否可以使用javascript创建这些括号，然后用该位置替换它们？

$('#content').children().draggable({ 
    drag: function(){
        var text = $('#textarea').text();

        // Replace Keys
        text = replaceLengthKey(text, "left", $(this).position().left);
        text = replaceLengthKey(text, "top", $(this).position().top);

        // Return changes
        $("#textarea").text(text);
    } 
});

function replaceLengthKey(source, name, value){
    // Absolute length units: https://developer.mozilla.org/en-US/docs/CSS/length#Absolute_length_units
    return source.replace(RegExp("\\{" + name + ":\\s*[0-9]*(px|mm|cm|in|pt|pc)?\\}", "gm"), "{" + name + ": " + value + "}")
}

 var text=$('#textarea').val();
 var newPos = "(left:" + ($(this).position().left) + "px" + "\ntop:" +($(this).position().top) + "px)"
 text=text.replace(/ *\([^)]*\) */g, newPos);
 $('#textarea').val(text);