子要素がドラッグされたときに要素をドラッグ可能にする

Question

プログラム的に作成された複数のスパン要素が、ウィンドウのように見えるように設計されています。各要素には、タイトルバーが上部を横切って表示されます。ドラッグ可能性が、jQuery UIを使用してマウスが子タイトルの上にある場合にのみ、または可能であれば、これを有効にするようにしています。

Answer 1

可能です。マウスが子要素を保持しているとき、親要素をドラッグ可能にしてから、マウスがそれを実現するときに再びドラッグできないようにします。

// The parent element 
 
var $aa = $("#aa"), 
 
// The child element 
 
    $bb = $("#bb"); 
 

 
// When the mouse is down 
 
$bb.mousedown(function() { 
 
    // Drag the element 
 
    $aa.draggable(); 
 
}); 
 

 
// When the mouse realizes 
 
$bb.mouseup(function() { 
 
    // Don't drag the element 
 
    $aa.draggable('destroy'); 
 
});

<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js" integrity="sha256-xI/qyl9vpwWFOXz7+x/9WkG5j/SVnSw21viy8fWwbeE=" crossorigin="anonymous"></script> 
 

 
<div id="aa"> 
 
    --- 
 
    <div id="bb">Push me</div> 
 
</div>

これは、とにかくより多くのイベント、と向上させることができます。