Geek asks and answers

JQuery draggable cancel option

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

Can I get an example?

+1
source share
2 answers

From jQuery UI docs cancel option ...

... prevents drag and drop from certain elements.

Let's 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"
});​

It buttonhas a class here selectorand should be dragged like other elements with the same class. However, the parameter is cancelset for all button, therefore, all elements buttonwith a class selectorare excluded from the drag list and cannot be dragged.

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

li selector, .

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

not-this . cancel:

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

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

, cancel .

...

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

... , selector , span:

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

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

+7

. , . .

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

More articles:


All Articles