-1

textarea から div ブロックにテキストを追加する小さなアプリケーションを作成します。ユーザーが黄色の div テキストをクリックしても追加されず、選択したテキストのプロパティ (フォント ファミリー、フォント サイズ) も選択ボックスで強調表示されるようにしたい

$(document).ready( function() {
    $('#page1').click(function(e){
    var $el = $("<li class='text'>"+$('#ta').val()+"</li>"),
        $this = $(this), offset = $this.offset();
    $el.css({
        position: 'absolute',
        left: e.pageX - offset.left,
        top: e.pageY - offset.top
    });
    $this.append($el);
    ($el).draggable();
    $("#page1 li").click(function(){
    $("#page1 li").removeClass('active');
    $(this).addClass("active");

    });
});
        $("#fs").change(function() {
            $('li.active').css("font-family", $(this).val());
        });
        $("#size").change(function() {
            $('li.active').css("font-size", $(this).val() + "px");
        });

      });

Jsfiddle リンク: http://jsfiddle.net/sharma_pooja/P2Kyk/31/

4

2 に答える 2

0

マウスでヒットした #block 要素のポイントの座標を持つテキストの段落を追加する場合は、次の手順を実行する必要があります。

1) 位置を追加: #block 要素 css に相対

2) #block クリック イベント ハンドラを次のように変更します。

   $('#block').click(function(e){
        var $el = $("<p>"+$('#ta').val()+"</p>"),
            $this = $(this), offset = $this.offset();
        $el.css({
            position: 'absolute',
            left: e.pageX - offset.left,
            top: e.pageY - offset.top
        });
        $this.append($el);
    });
于 2012-12-29T07:44:54.340 に答える
0 
$('#block').click(function(e){

    var $this = $(this);
    var $textBlock = $this.children('p');
    var _offset = $this.offset();

    $textBlock.css({
        position: 'relative',
        left: e.pageX - _offset.left,
        top: e.pageY - _offset.top
    });

});

そしてCSSoverflow: hidden;を#blockクラスに追加します。ブロックの境界線の近くに配置すると、ブロックからはみ出す残りのテキストが非表示になります。

アップデート

ドラッグ可能なオプションについては、jQuery UIを使用する必要があり、スムーズに実行できます。このような

$('#block p')
    .draggable() // for moving the `<p>` around with your mouse
    .disableTextSelect(); // to disable text selection inside container

親コンテナをクリックしてテキストブロック自体をドラッグすると、両方のケースでフィドルが発生します。

于 2012-12-29T09:42:58.027 に答える