1

我正在研究 jQuery 可拖动取消选项，但我没有得到任何示例来理解“取消选项”。

我可以举个例子吗？

4

2 回答 2

7

从jQuery UI 文档 cancel选项...

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

让我们看看下面的例子。

HTML：

​&lt;div class="selector">This can be dragged</div>
​&lt;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为 all 设置了选项button，因此所有button具有类的元素selector都被排除在可拖动列表之外并且不能被拖动。

演示：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"
});​

演示：http: //jsfiddle.net/uPRaH/1/

在第三个示例中，我们可以看到canceloption 如何防止嵌套元素拖动。

对于以下标记...

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

...让我们可以selector通过任何手柄拖动，除了span：

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

演示：http: //jsfiddle.net/uPRaH/2/

于 2012-06-23T13:08:19.473 回答
0

这个示例程序可以帮助你。要对此进行测试，请将列表项拖放到 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>
于 2012-06-23T13:12:54.450 回答