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

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>

无论如何，随着更多的事件，这可能会有所改善。