Question

我正在研究jQuery draggable cancel选项，但我没有任何例子来理解'取消选项'。

我可以举个例子吗？

Answer 1

来自jQuery UI docs cancel选项...

...阻止从指定元素开始拖动。

让我们看看下面的例子。

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"
});

此处button元素具有selector类，应作为具有相同类的其他元素拖动。但是，cancel选项已设置为button，因此所有button个类selector元素都会从可拖动列表中排除，并且无法拖动。

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/

Answer 2

此示例程序可能对您有所帮助。要对此进行测试，请拖动列表项并将其放入textarea中。您可以了解其功能。

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

jQuery draggable取消选项

2 个答案: