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

});

并将 CSS 添加overflow: 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 回答