跟踪 div 在 textarea 中的位置

Question

我有一个 textarea 可以跟踪这样的可移动 div

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

问题是，如果我在该文本区域中写入内容，如果我移动 div，它将停止更新位置。 如果textarea中的文字是这样的：

blablablabla 左：10px 顶部：20px； 呸呸呸

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

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

有什么想法吗？

使用“.val”而不是“.text”的示例：http://jsfiddle.net/Ydkrw/ ".val" 将删除现有文本...

更新：基于 valentinos 的回答，我确实喜欢：http://jsfiddle.net/8G82U/ 但是，如果您在移动之前在 textarea 中写了一些东西，这将不起作用

Answer 1

这可能会帮助您入门。这只是一个粗略的设计，可能会对您有所帮助。使用了substring 和replace javascript 方法。

Fiddle

Answer 2

您可以将表示位置的字符串保存在变量中，并在拖动 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;
    }
});

http://jsfiddle.net/kCT9f/

Answer 3

通常，当我做这样的事情时，我会在内容中添加一个替换键，并在我需要准备内容时替换它。

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

当 div 像这样移动时更新关键字。

$('#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 + "}")
}

然后，当你在服务器或客户端上准备你想要的内容时，至少结构会是一致的。

Answer 4

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

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