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