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

Question

我有多个以编程方式创建的span元素，用于查看和操作窗口。每个元素都有一个横跨顶部的标题栏。我试图通过使用jQuery UI将鼠标悬停在子标题元素上或者仅当鼠标位于使用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>

无论如何，这可以通过更多事件来改善。