Dragging input text in jQuery UI draggable

Question

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

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:

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

add div1.draggable(); after input1.appendTo(div1); and check — Nishit Maheta, Mar 31 '15 at 04:41
can you please create fiddle as i am not able to open link provided by you — Nishit Maheta, Mar 31 '15 at 04:47

score 1 · Accepted Answer · edited May 23 '17 at 12:32

1

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

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

edited May 23 '17 at 12:32

Community

1
1

answered Mar 31 '15 at 06:39

Guruprasad J Rao

29,410
14
101
200

Thanks, this worked, however sometimes I need the input field to be enabled, I tried to remove `readonly` in your plunk but the field stays disabled. Any idea why? – ps0604 Mar 31 '15 at 15:10
I made it work, [this is the plunk](http://plnkr.co/edit/s8JqHW6Tsfo11e1lSOmQ?p=preview) – ps0604 Mar 31 '15 at 15:21
@pgschr.. Sorry!! I just saw your response. Glad it worked. Happy Coding.. :) – Guruprasad J Rao Mar 31 '15 at 16:48
Nice work @GuruprasadRao and @pgschr! You guys resolved my problem, that edit text trick was very nice to serve both drag and edit purposes. Thanks :) – Anmol Saraf Jun 17 '15 at 21:19
@AnmolSaraf Gald it helped you too.. happy coding.. :) – Guruprasad J Rao Jun 18 '15 at 03:15

Dragging input text in jQuery UI draggable

1 Answers1

Linked