Question

I create a small application to add text from textarea to div block..I want when user click on yellow div text not get append and the properties (font family, font size) of the selected text also highlight in the selectbox

$(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 link: http://jsfiddle.net/sharma_pooja/P2Kyk/31/

Answer 1

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

});

And add CSS overflow: hidden; to the #block class. It will hide rest of text which will be overflowing the block when positioned near the block border.

---

UPDATE

For draggable option you should use jQuery UI and can do smth. like this

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

Here is fiddle for both cases: when clicking parent container and dragging the text block itself.