在可拖动的jQuery UI中拖动输入文本 [英] Dragging input text in jQuery UI draggable

问题描述

在此插件中我有一个div，其中包含一个只读输入字段.我使用jQuery UI使div可拖动.

In this plunk I have a div that contains an input field readonly. I made the div draggable with jQuery UI.

当我拖动未被输入字段隐藏的部分时，它可以正常工作(尝试拖动橙色区域).但是，当我尝试通过拖动输入字段来拖动div时，div不会移动.即使鼠标位于div中包含的任何元素上，我也需要拖动div.这可能吗?

When I drag the portion that is not hidden by the input field, it works fine (try dragging the orange area). But when I try to drag the div by dragging the input field, the div doesn't move. I need to drag the div even though the mouse is on any element included in the div. Is this possible?

JavaScript:

Javascript:

$(function() {
    var div1 = $('#div1');
    div1.draggable();
    var input1 = $('<input type="text" readonly value="Some Text" style="position:absolute;top:0;left:0;border:0">');
    input1.appendTo(div1);   
})

推荐答案

我认为这就是您所需要的

I think this is what you need

$(function() {
    var div1 = $('#div1');
    var input1 = $('<input type="text" readonly value="Some Text" style="position:absolute;top:0;left:0;border:0">');
    input1.appendTo(div1);   
    $('#div1').draggable({
                cancel: ''
    });
});

基本上，cancel选项的作用是它将取消拖动选项 里面提到的那些元素.由于您不想取消 在任何子元素上拖动选项，只需将其留空即可.

Basically what cancel option does is it will cancel dragging options on those elements mentioned inside it. Since you do not want to cancel drag option on any child elements, just leave it blank.

您可以在 此 和 此 链接和 这是 工作朋克 供您参考

You can find more information in this and this link and Here is the Working Plunk for your reference

这篇关于在可拖动的jQuery UI中拖动输入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！