Question

我创建了一个小应用程序，用于将textarea中的文本添加到div块中。我希望当用户点击黄色div文本时没有得到附加，并且所选文本的属性（字体系列，字体大小）也会在选择框中突出显示< / p>

$(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元素中的点的坐标的文本段落，那么你必须执行以下操作：

1）添加位置：相对于#block元素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);
    });

Answer 2

$('#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并且可以执行smth。像这样

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

以下两种情况都是 fiddle ：点击父容器并拖动文本块本身。

使用选择框（On Click）绑定文本Jquery

2 个答案: