当拖动子元素时使元素可拖动

Question

我有多个以编程方式创建的span元素，它们的设计看起来像窗口一样行事。每个元素的顶部都有一个标题栏。我试图获得它，以便通过或仅当鼠标悬停在使用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>

这可以通过更多的活动提高了，反正。