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. (

Answer 1

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