jQuery可拖动取消选项 [英] jQuery draggable cancel option

问题描述

我正在研究jQuery可拖动的取消选项，但我没有任何示例可以理解取消选项".

我可以举个例子吗?

解决方案

来自 jQuery UI文档 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类，应与其他具有相同类的元素一起拖动.但是，为所有button设置了cancel选项，因此所有类selector的button元素都从可拖动列表中排除，并且不能被拖动.

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

---

在下一个示例中，我们可以拖动具有selector类的许多li元素.

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

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

Can I get an example?

解决方案

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/

这篇关于jQuery可拖动取消选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！