jQuery draggable取消选项

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都将从可拖动列表中排除,并且无法拖动.

演示: 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/

在第三个示例中,我们可以看到cancel选项如何有效防止嵌套元素的拖动.

对于以下标记...

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