0

こちらのデモに示すように、threedubmedia のドラッグ アンド ドロップ選択機能を使用しようとしています。私はそのコードをすべて理解しましたが、理解できないのは、機能を有効および無効にする方法です。これはbind()とunbind()を使用していると思いますが、以前にそれらを使用したことがなく、どのように機能するかわかりません。基本的に、ボタンをクリックして有効にし、別のボタンをクリックして無効にしたいと考えています。どうすればいいですか？

4

1 に答える 1

1

これは、コピーされたサンプルデモのフィドルであり、追加されたバインド解除および再バインド機能を使用しています。

バインディングを削除したい要素に対して .unbind() を呼び出す必要があります。この特定のケースでは、 $(document) 要素がターゲットです。パラメーターなしで .unbind() を実行すると、その要素からすべてのバインディングが削除されますが、特定のイベント パラメーターを渡してそれらを削除することもできます。

上記のフィドルで行ったことは、バインド解除ボタンにクリック機能を追加してドキュメント要素のバインドを削除し、再バインド ボタンに 2 番目のクリック機能を追加してそれらを再アタッチすることです。ive はいくつかの基本的な html と css を追加して追加の jquery と一緒にアンバインド/再バインドを実行しました

HTML

<div class="unbind">UNBIND the drag drop Document Handlers</div>
<div class="rebind">RE-BIND</div>

CSS

.unbind{
    display:block;
    padding:10px 30px;
    background: red;
    cursor:pointer;
    position:absolute;
    bottom: 100px;
    color: white;
    font-family: Arial;
    font-size:25px;
}

.rebind{
    display:block;
    padding:10px 30px;
    background: green;
    cursor:pointer;
    position:absolute;
    bottom: 10px;
    color: white;
    font-family: Arial;
    font-size:25px;
}

JS

$('.unbind').click(function(){
     alert("unbound");
     $(document).unbind();
});
$('.rebind').click(function(){
     alert("rebound");
        $( document )
        .drag("start",function( ev, dd ){
            return $('<div class="selection" />')
                .css('opacity', .65 )
                .appendTo( document.body );
        })
        .drag(function( ev, dd ){
            $( dd.proxy ).css({
                top: Math.min( ev.pageY, dd.startY ),
                left: Math.min( ev.pageX, dd.startX ),
                height: Math.abs( ev.pageY - dd.startY ),
                width: Math.abs( ev.pageX - dd.startX )
            });
        })
        .drag("end",function( ev, dd ){
            $( dd.proxy ).remove();
        });
});

楽しい

于 2013-05-21T03:05:19.220 に答える