0

我正在使用 jquery 可调整大小的文本区域。一切正常，但左键单击它不会聚焦文本区域。右键单击可进行焦点和光标移动，但左键单击不起作用。我想通过左键单击或单击来聚焦文本区域。

JSFiddle

HTML:-

<div class="drag-item item-txt txt-static" id="1>" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;">
 <textarea style=" width:98px; height:48px;" name="text" id="text">Some text</textarea>

JS：-

$(function () {
$('.drag-item').draggable({
                snap        : true,
                cursor      : "move",
                delay       : 100,
                scroll      : false,
                cancel: "text",
                containment : "parent",
               drag: function(e, ui){
                   //some code
                }
            }).resizable({
                containment : "parent",
                stop: function(e, ui) {
                    var width = ui.size.width;
                    var height = ui.size.height;
                    var hereDrag = this;

                    if($(hereDrag).find('textarea').length > 0){
                        $(hereDrag).find('textarea').css('width', width - 10);
                        $(hereDrag).find('textarea').css('height', height - 10);
                    }
                },
                resize: function(e, ui){
                   //some code
                }
            })

});

CSS：-

div {
    float: left;
}
#droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    float: left;
    margin: 10px;
    border:3px solid;
}
4

2 回答 2

1

问题是因为整个div用于拖动，所以click事件停止冒泡到textarea. 您需要使用 ahandle来进行拖动。尝试这个：

$('.drag-item').draggable({
    handle: '.drag-handle',
    // other settings...
})

<div class="drag-item item-txt txt-static">
    <div class="drag-handle"></div>
    <textarea style=" width:98px; height:48px;" name="text" id="text">Some text</textarea>
</div>

请注意，您可以根据.drag-handle需要进行显示，我只是为速度做了示例。

示例小提琴

于 2013-11-06T12:32:02.660 回答
0

使用这个 JS：

$(function () {
    $('.drag-item').draggable({
                    snap        : true,
                    cursor      : "move",
                    delay       : 100,
                    scroll      : false,
                    cancel: "text",
                    containment : "parent",
                    drag: function(e, ui){
                       //some code
                    }
                }).resizable({
                    containment : "parent",
                    stop: function(e, ui) {
                        var width = ui.size.width;
                        var height = ui.size.height;
                        var hereDrag = this;

                        if($(hereDrag).find('textarea').length > 0){
                            $(hereDrag).find('textarea').css('width', width - 10);
                            $(hereDrag).find('textarea').css('height', height - 10);
                        }
                    },
                    resize: function(e, ui){
                       //some code
                    }
                });

    $('.drag-item').click(function(){
        $("#text").focus();
    });

});

在小提琴中为我工作。

于 2013-11-06T12:35:57.250 回答