jQuery可拖动取消选项

我正在学习jQuery可拖动取消选项，但我没有得到任何示例来理解'取消选项'。jQuery可拖动取消选项

我可以得到一个例子吗？

来源

2012-06-23 user1476794

你是什么意思*“取消选项”*？你在谈论http://jqueryui.com/demos/draggable/#option-cancel？ – VisioN

检查此http://jsfiddle.net/joycse06/EPKfR/。它可以让你指定拖动不能开始的'可拖动集合'内的'elements'。 –

@Vision是的，我正在谈论这个链接。 – user1476794

从jQuery UI docscancel选项...

...防止启动上指定的元素拖动。

让我们看看下面的例子。

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/

在接下来的例子中，我们有与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" 
});

DEMO：http://jsfiddle.net/uPRaH/1/

在第三个例子中，我们可以看到cancel选项是如何有效防止通过嵌套元素拖动。

对于下面的标记...

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

...让我们做这样我们就可以通过任何手柄除了span拖动selector：

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

DEMO：http://jsfiddle.net/uPRaH/2/

来源

2012-06-23 13:08:19 VisioN

本示例程序可能会对您有所帮助。要测试这个，请拖动列表项并将它们放在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-23 13:12:54 Hearaman

jQuery可拖动取消选项

回答

相关问题