2

このようなmovebledivを追跡するtextareaがあります

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

問題は、そのテキストエリアに何かを書き込んだ場合、divを移動すると位置の更新が停止することです。textareaのテキストが次のようになっている場合：

blablablabla left：10px top：20px; blablablablabla

テキストエリアの他のコンテンツを削除せずにdivを移動した場合に、テキストエリアに書き込み、位置を更新できるようにしたい。

誰かがテキストエリアに好きなように書くことができるはずです、そして彼らがそれを動かすならば、位置は彼らが書いたものの特定の場所または終わりに現れるでしょう

何か案は？

「.text」の代わりに「.val」を使用する例：http：//jsfiddle.net/Ydkrw/ 「.val」は既存のテキストを削除します...

更新：valentinosの回答に基づいて私はそうしました：http：//jsfiddle.net/8G82U/ しかし、移動する前にテキストエリアに何かを書き込んだ場合、これは機能しません

4

4 に答える 4

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 に答える
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 に答える