讓父div可以與子div一起拖動div

Question

如何使父div可以用子div拖動？

我正在使用jquery-ui可拖動功能。我無法在網站上找到任何有關我的問題的信息，所以我在這裏問。

整個div只能用標題而不是整個div來拖動。

http://api.jqueryui.com/draggable/

我的例子： https://jsfiddle.net/3xdLtask/1/

<div class="draggable window"> 
    <div class="windowHeader"> 
    <div class="windowTitle"> 
     child header 
    </div> 
    <div class="windowCloseBtn"> 
     <div class="windowCloseBtnInner"> 

     </div> 
    </div> 
    </div> 
    <div class="windowContent"> 
    content 
    </div> 
</div> 

Answer 1

您必須使用handle event爲獲得期望的結果。在這裏查看api文檔。 http://jqueryui.com/demos/draggable/#handle

這裏是低於工作示例：

$("#MainDiv").draggable({ 
 
    handle: "#header" 
 
});

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    font-family: arial; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
} 
 

 
.ModalBox { 
 
    border: 2px solid #000; 
 
    width: 200px; 
 
    background: red; 
 
} 
 

 
.Modal-header { 
 
    background: #7bd4ff; 
 
    width: 100$; 
 
    height: 40px; 
 
    border-bottom: 2px solid #000; 
 
    color: #fff; 
 
    padding: 10px; 
 
} 
 

 
.Modal-Body { 
 
    height: 260px; 
 
    background: #ffadc9; 
 
    color: #fff; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="ModalBox" id="MainDiv"> 
 
    <div class="Modal-header" id="header">I am Dragabble header !</div> 
 
    <div class="Modal-Body"> 
 
    I am child ! I am Child ! I am Child ! I am child ! I am Child ! I am Child ! I am child ! I am Child ! I am Child ! I am child ! I am Child ! I am Child ! I am child ! I am Child ! I am Child ! I am child ! I am Child ! I am Child ! I am child ! I am Child ! I am Child ! I am child ! 
 
    </div> 
 

 
</div>