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-06T12:33:46.387

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 06 '14 at 12:33

answered Nov 05 '14 at 12:54

mtl

7,529
2
20
22

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. – DavidS Jul 23 '16 at 00:31
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. – Vikram Rao Feb 23 '18 at 07:38
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: http://api.jqueryui.com/draggable/#option-cancel – fooquency Dec 29 '18 at 22:26

score 2 · Answer 2 · answered Nov 05 '14 at 12:09

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

@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. — Quick_Silver, Nov 05 '14 at 12:44

score 0 · Answer 3 · answered Nov 05 '14 at 12:11

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 05 '14 at 12:11

chridam

100,957
23
236
235

now I could edit my text box but I could not drag my div by dragging the text box. – Quick_Silver Nov 05 '14 at 12:41

score 0 · Answer 4 · answered Feb 23 '18 at 07:55

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"
});

Draggable and Clickable input element using jquery

4 Answers4

-DEMO-

Linked