How to make an input field draggable [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

I have a dropdown/input field, but I want to put a draggable event into it. When I drag it for the first time, it moves smoothly, but when I start to edit the text inside the input field, I can't seem to drag it around anymore. I've been researching the on the draggable methods but no luck.

Basically I have a <div> wrapped around the dropdown/input field where the draggable event is attached.

<div class="draggable">
    <select>
       <option>
    </select>
    <input>
</div>

It's something like that. Below is the link for the code that has the dropdown/input field, but it still has the draggable event.

http://jsfiddle.net/yUxr4/406/

EDIT: Here is the updated code, but the draggable is not working. I don't know why. http://jsfiddle.net/9SPvQ/1/

Answer 1

You need to dispatch event because jQuery UI draggable prevent drag behaviour on input element. Now, to still have input element responsive, you can use following workaround:

DEMO jsFiddle

$(".draggable").draggable({
    start: function( event, ui ) {
       $(this).data('preventBehaviour', true);
    }
});

$(".draggable :input").on('mousedown', function (e) {
    var mdown = document.createEvent("MouseEvents");
    mdown.initMouseEvent("mousedown", true, 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)
    }
});