Question

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

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

问题是，如果我在该textarea中写一些东西，如果我移动div，它将停止更新位置。如果textarea中的文本是这样的：

blablablabla 左：10px的顶部：20像素; blablablablabla

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

某人应该能够在textarea中写下他们想要的任何内容，如果他们移动它，那么该位置将显示在特定的位置或者他们所写的内容的最后

有什么想法吗？

使用“.val”代替“.text”的示例：http://jsfiddle.net/Ydkrw/ “.val”将删除现有文字......

更新：根据valentinos的回答，我确实喜欢这样：http://jsfiddle.net/8G82U/ 但是如果你在移动它之前在textarea中写一些东西，那么这不起作用

Answer 1

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

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

<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 3

您可以将位置文本括在括号内，然后在移动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);

Answer 4

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

Fiddle

跟踪文本区域中div的位置

4 个答案: