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
– Nishit Maheta, Commented Mar 31, 2015 at 4:41
can you please create fiddle as i am not able to open link provided by you — Nishit Maheta
– Nishit Maheta, Commented Mar 31, 2015 at 4:47

Community · Accepted Answer · 2017-05-23 12:32:52Z

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, 2017 at 12:32

CommunityBot

11 silver badge

answered Mar 31, 2015 at 6:39

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ps0604 Over a year ago

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 Over a year ago

I made it work, this is the plunk

Guruprasad J Rao Over a year ago

@pgschr.. Sorry!! I just saw your response. Glad it worked. Happy Coding.. :)

Anmol Saraf Over a year ago

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 :)

Guruprasad J Rao Over a year ago

@AnmolSaraf Gald it helped you too.. happy coding.. :)

Collectives™ on Stack Overflow

Dragging input text in jQuery UI draggable

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related