2

我有一个 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 中写了一些东西，这将不起作用

4

4 回答 4

0

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

于 2013-03-11T15:15:25.313 回答
0

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

<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 + "}")
}

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

于 2013-03-11T15:16:35.980 回答
0

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

 var text=$('#textarea').val();
 var newPos = "(left:" + ($(this).position().left) + "px" + "\ntop:" +($(this).position().top) + "px)"
 text=text.replace(/ *\([^)]*\) */g, newPos);
 $('#textarea').val(text);
于 2013-03-11T15:30:17.163 回答
0

这可能是让你开始的东西。这只是一个粗略的设计，可能会对您有所帮助。使用substring和replacejavascript方法。

小提琴

于 2013-03-11T16:11:35.910 回答