使用选择框绑定文本（单击时）Jquery [关闭]

Question

我创建了一个小应用程序来将文本从 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/

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
    });

});

并将 CSS overflow: hidden; 添加到 #block 类。当定位在块边界附近时，它将隐藏将溢出块的其余文本。

---

更新

对于可拖动选项，您应该使用jQuery UI 并且可以做到这一点。像这样

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

这里是 fiddle 两种情况：单击父容器并拖动文本块本身时。

Answer 2

如果你想在#block元素中添加与鼠标点击的点坐标的文本段落，那么你必须执行以下操作：

1) 添加位置：相对于#block element css

2) 像这样更改#block click 事件处理程序：

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