How to disable an element in HTML page but be able to drag it with jQuery draggable?

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?

That's not your actual `append()` string, is it? It's missing some quotes on the string. — Jared Farrish, Jun 23 '12 at 07:04
Have you call `.draggable()` method after appending your button? — Tooraj Jam, Jun 23 '12 at 07:07
Is there any error in your JS console on firebug or chrome inspector? — Tooraj Jam, Jun 23 '12 at 07:12

score 1 · Answer 1 · answered Jun 23 '12 at 07:04

1

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

should be

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

because .elements is button itself.

and

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

should be

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

and I think your draggable code should be (and must be after append() statement)

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

answered Jun 23 '12 at 07:04

thecodeparadox

86,271
21
138
164

+ 1 bruv, for OP: if I can suggest to OP in case of already disabled element use `e.preventDeafult` or this might help: http://stackoverflow.com/questions/704564/disable-drag-and-drop-on-html-elements – Tats_innit Jun 23 '12 at 07:06
thank you, but still doesn't work. seems the problem is: if it is disabled can't be draggable. – Mouliyan Jun 23 '12 at 07:09
@all, sorry that children() stuff and quote are just missed when I was removing unnecessary things. – Mouliyan Jun 23 '12 at 07:13
@Tooraj: then I have two problems, first I don't want to be clickable, it is a form designer, and second it isn't draggable while I click on it :) – Mouliyan Jun 23 '12 at 07:14

score 1 · Accepted Answer · answered Jun 23 '12 at 07:58

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/

How to disable an element in HTML page but be able to drag it with jQuery draggable?

2 Answers2