4

handlejquery draggable のオプションをボックスの内層ではなく外層に設定するにはどうすればよいですか?

たとえば、カーソルのみがこのポップアップの黒い境界線をクリックしてドラッグされ、コンテンツ領域ではドラッグされない場合、このポップアップ ボックスを下にドラッグします。

出来ますか？

jsfiddle

現在、ボックスは、コンテンツ領域または黒い境界線にカーソルを置いているかのいずれかでドラッグされています。

jquery、

$(document).ready(function(){

    // Attach the jquery.ui draggable.
    $('.ps-popup-outer').draggable({ 
        cursor: "move",
        handle: ".ps-popup-outer"
    });

});

html、

<div class="ps-popup-outer" style="width:400px;">
    <div class="ps-popup-inner" style="height:400px;">
        <div class="box-close"><input type="button" value="Close" class="button-close"/></div>
        <div class="box-content">inner content</div>
    </div>
</div>

それとも、あなたが提案できるより良い解決策がありますか?

4

1 に答える 1

9

You will want to use draggable's cancel option, which will prevent dragging on particular elements.

 $('.ps-popup-outer').draggable({ 
    cursor: "move",
    handle: ".ps-popup-outer",
    cancel: ".ps-popup-inner"
 });

DEMO: http://jsfiddle.net/dirtyd77/4bCed/1/

Hope this helps!

于 2013-02-08T16:27:57.293 に答える