Question

I make an element on a page with mouse click somewhere on the page by inputting something like this to the document:

$("#sheet").append('<input class="elements" id="Button12" type="button" value="button" />');

But I don’t want to be clickable for a while,so I can disable it:

$(".elements").prop('disabled', true);

But the problem is, I want this element to be draggable so I can move it on the page, I tried this but doesn’t work:

$('.elements').draggable
({
    containment: "#frame",
    grid: [5,5]
})

How can an element be draggable while it is unclickable?

Answer 1

Usually better with form elements when animating, or dragging to wrap in another container. In this case insert another element positioned absolute and higher z-index that fills the wrapping container, and covers the disabled input since mouse events won’t register on the disabled element. By covering the input, mousedown for drag will occur on the inner span.

var input='<span class="element_wrap"><span class="element_wrap_inner"></span>';
    input+='<input class="elements" id="Button12" type="button" value="button" disabled+"disabled" /></span>';

$("#sheet").append(input);

$('.elements_wrap').draggable({
    containment: "#frame",
    grid: [5,5]
});

Apply appropriate css. When enabling the input, hide or remove the inner span

DEMO: Using click on a disabled checkbox for simplicity http://jsfiddle.net/KtP5K/