1

jQueryのドラッグ可能なキャンセルオプションを勉強していますが、「キャンセルオプション」を理解するための例がありません。

私は例を得ることができますか？

4

2 に答える 2

7

jQuery UI docs オプションから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 に設定されているため、 class を持つbuttonすべての要素はドラッグ可能なリストから除外され、ドラッグできません。buttonselector

デモ: 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-thisclass を持つ 3 番目の要素をドラッグ可能なリストから除外しましょう。cancelオプションを使用することも簡単です。

$(".selector").draggable({
    cancel: ".not-this"
});​

デモ: http://jsfiddle.net/uPRaH/1/

cancel3 番目の例では、ネストされた要素によるドラッグを防ぐためにオプションがどのように役立つかを見ることができます。

次のマークアップの場合...

<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

このサンプル プログラムが役立つ場合があります。これをテストするには、リスト項目をドラッグしてテキストエリアにドロップしてください。機能を知ることができます。

    <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 に答える