與選擇框（點擊時）的Jquery

-1

綁定文本創建的小應用程序從textarea的文本添加到div的block..I希望在黃格文本用戶點擊得不到追加和屬性（字體，字體大小）選定的文本還強調在選擇框與選擇框（點擊時）的Jquery

$(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/

來源

2012-12-29 pooja9

所以你有什麼問題？ – doniyor

你可能會更具體一點。你想獲得一個值或點擊座標，這將是page.X等 – adeneo

什麼是不適合你？ – ATOzTOA

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

});

並添加CSS overflow: hidden;到#block類。當位於塊邊界附近時，它將隱藏剩餘的文本，這些文本將溢出塊。

UPDATE

對於拖動選項，你應該使用jQuery UI並能做到不便。這樣

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

這裏是fiddle這兩種情況下：單擊父容器並拖動文本塊本身時。

來源

2012-12-29 09:42:58

感謝您的答覆！在每一次點擊它追加文本可以幫助我如何選擇文本並將其拖動到任何地方？ – pooja9

@ pooja9，我已經在你的小提琴中測試過它，它沒有追加任何東西，它只是移動到'click'事件的適當座標。據我所知，你需要在這裏使用「drag-n-drop」選項。我對嗎？ –

@ pooja9，我已經更新了我的答案。 –

如果您要添加文本的段落，這將havee在＃阻止元素打你用鼠標點COORDS，那麼你「將不得不做到以下幾點：

1）添加位置：相對於＃阻止元素的CSS

2）改變＃阻止點擊事件處理，像這樣：

$('#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-29 07:44:54

感謝您的答覆！每次點擊它附加文本可以幫助我如何選擇文本並將其拖動到任何地方？ – pooja9

與選擇框（點擊時）的Jquery

回答

相關問題