CODEWITHSUNDEEP
jqueryjquery-ui
user1476794
user1476794

Reputation: 11

jQuery draggable cancel option

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

Can I get an example?

Upvotes: 1

Views: 14216

Answers (2)

VisioN
VisioN

Reputation: 145408

From the jQuery UI docs cancel option ...

... prevents dragging from starting on specified elements.

Lets have a look at the following example.

HTML:

​<div class="selector">This can be dragged</div>
​<span class="selector">​​​​​​​This can be dragged</span>
<input type="button" value="This can be dragged" class="selector" />
<button class="selector">This can't be dragged</​​​​​​​​​​​​​​button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

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.

<ul>
    <li class="selector">This can be dragged</li>
    <li class="selector">This can be dragged</li>
    <li class="selector not-this">This can't be dragged</li>
    <li class="selector">This can be dragged</li>
    <li class="selector">This can be dragged</li>
    <li class="selector">This can be dragged</li>
    <li class="selector">This can be dragged</li>
</ul>​

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

<div class="selector">
    Draggable
    <div>Draggable</div>
    <span>Not draggable</span>
    <div>Draggable</div>
    Draggable
</div>

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

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

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

Upvotes: 7

Hearaman
Hearaman

Reputation: 8726

This sample program may helps you. To test this, Please drag the list items and drop them in textarea. You can get to know the functionality.

    <html>
        <head>
            <style type="text/css">
                #divFields
                {
                    margin-right: 2em;
                }
                #txtMessageFields
                {
                    margin: 0;
                    padding: 1em 0 1em 3em;
                    font-weight:bold;
                    font-size:18px;

                }
            </style>
            <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

            <script type="text/javascript">        
                $(document).ready(initialize);
                function initialize() 
                {
                    $("#divFields li").draggable
                    ({
                        helper: "clone",
                        cancel:"li#iComputer"
                    });


                    $("#divDroppedFields").droppable
                    ({
                        accept: "#divFields li",                            
                        drop: function (event, ui)
                        {                               
                                $(this).find('#txtMessageFields').append((ui.draggable.attr('data-value')));                        
                        }
                    });
                }
            </script>
        </head>
        <body>
            <div id="divFields">
                <ul>
                    <li data-value="iPhone">iPhone</li>
                    <li data-value="iPod">iPod</li>
                    <li data-value="iComputer" id="iComputer">iComputer</li>
                </ul>
            </div>
            <div id="divDroppedFields" class="ui-widget-content">
                <textarea id="txtMessageFields" cols="50" rows="10"></textarea>
            </div>
        </body>
    </html>

Upvotes: 0

Related Questions