jQuery draggable cancel option

Question

I am studying jQuery draggable cancel option, but I am not getting any example to understand the \'cancel option\'.

Can I get an example?

Answer 1

From the jQuery UI docs cancel option ...

... prevents dragging from starting on specified elements.

Lets have a look at the following example.

HTML:

​
This can be dragged
​​​​​​​​This can be dragged

This can't be dragged​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JavaScript:

$(".selector").draggable({
    cancel: "button"
});​

Here button element has selector class and should be dragged as the other elements with the same class. However, cancel option is set for all button, so all button elements with class selector are excluded from the draggable list and can't be dragged.

DEMO: http://jsfiddle.net/uPRaH/

---

In the next example we have many li elements with selector class which can be dragged.

    
This can be dragged
    
This can be dragged
    
This can't be dragged
    
This can be dragged
    
This can be dragged
    
This can be dragged
    
This can be dragged
​

Let's exclude the third element with class not-this from the draggable list. It is also easy to do with cancel option:

$(".selector").draggable({
    cancel: ".not-this"
});​

DEMO: http://jsfiddle.net/uPRaH/1/

---

In the third example we can see how cancel option is useful to prevent dragging by nested elements.

For the following markup...

    Draggable
    
Draggable
    Not draggable
    
Draggable
    Draggable

... let's make so that we can drag selector by any handle except span:

$(".selector").draggable({
    cancel: "span"
});​

DEMO: http://jsfiddle.net/uPRaH/2/