Draggable and Clickable input element using jquery

Question

I have an input element inside a draggable div. My code should do the following things:

When I drag my input element, entire draggable div should be dragged. (Accomplished)
When I click on the input element, I should be able to edit the text. (Could not accomplish)

So, could some one tell me how to click and edit the text of an input element which is draggable as well?

Here is my complete code:

<!DOCTYPE html>
<html>
    <head>
        <title>Draggable and Clickable Input</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/jquery.js"></script>
        <script src="js/jquery-ui.js"></script>
        <style>
            .draggable{height:500px;width:500px;background:blue;}
        </style>
    </head>
    <body>

        <div class="draggable" >
            <input type="text" value="drag me!"/>
        </div>

        <script>
            $('.draggable').draggable({
                cancel: ''
            });
        </script>

    </body>
</html>

mtl · Accepted Answer · 2014-11-06 12:33:46Z

5

$('.draggable input').click(function() {
    $(this).focus();
});

The input field is now editable, and you can still drag the whole div from the input field. JSFiddle.

edited Nov 6, 2014 at 12:33

answered Nov 5, 2014 at 12:54

mtl

7,5672 gold badges23 silver badges24 bronze badges

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

3 Comments

user201891 Over a year ago

I notice your solution depends on setting cancel: null, but I can't figure out what this is doing. It doesn't seem to be documented in the API.

Vikram Rao Over a year ago

I need to use the cancel property for draggable (actually sortable). This solution does not work for me. But otherwise it seems to be a clever hack.

fooquency Over a year ago

The cancel option prevents dragging from starting on specified elements, and defaults to "input,textarea,button,select,option". Thus setting it to an empty string '' makes input boxes, etc. part of the overall draggability, but then they need special handling as per the above workaround. See documentation here: api.jqueryui.com/draggable/#option-cancel

A. Wolff · Accepted Answer · 2014-11-05 12:09:22Z

2

You could dispatch event, e.g:

-DEMO-

$(".draggable").draggable({
    start: function (event, ui) {
        $(this).data('preventBehaviour', true);
    }
});
$(".draggable :input").on('mousedown', function (e) {
    var mdown = document.createEvent("MouseEvents");
    mdown.initMouseEvent("mousedown", false, true, window, 0, e.screenX, e.screenY, e.clientX, e.clientY, true, false, false, true, 0, null);
    $(this).closest('.draggable')[0].dispatchEvent(mdown);
}).on('click', function (e) {
    var $draggable = $(this).closest('.draggable');
    if ($draggable.data("preventBehaviour")) {
        e.preventDefault();
        $draggable.data("preventBehaviour", false)
    }
});

answered Nov 5, 2014 at 12:09

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

1 Comment

Quick_Silver Over a year ago

@Wolff, Thank you for your solution. Your solution serves the purpose. But, it would be great if you could refine the solution and make it further simpler.

chridam · Accepted Answer · 2014-11-05 12:11:47Z

0

You could try adding the contenteditable attribute to your div:

HTML

<div contenteditable="true" class="draggable" >
    <input type="text" value="drag me!"/>
</div>

JQuery

$(".draggable").draggable()
  .click(function() {
    $(this).draggable( {disabled: false});
}).dblclick(function() {
    $(this).draggable({ disabled: true });
});

JSFiddle

answered Nov 5, 2014 at 12:11

chridam

104k26 gold badges246 silver badges243 bronze badges

1 Comment

Quick_Silver Over a year ago

now I could edit my text box but I could not drag my div by dragging the text box.

Vikram Rao · Accepted Answer · 2018-02-23 07:55:23Z

0

Really old question but I have a slightly different solution, so answering here.

Disable draggable for input element by setting cancel attribute in the draggable initialiser. I think in most situations it is a small compromise. But YMMV.

$(".card").draggable({
     cancel: "input"
});

answered Feb 23, 2018 at 7:55

Vikram Rao

5063 silver badges16 bronze badges

Collectives™ on Stack Overflow

Draggable and Clickable input element using jquery

4 Answers 4

3 Comments

-DEMO-

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related