让父div可以与子div一起拖动div

-2

我正在使用jquery-ui可拖动功能。我无法在网站上找到任何有关我的问题的信息，所以我在这里问。

整个div只能用标题而不是整个div来拖动。

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

<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>

来源

2017-04-10 Tenshō 転掌

不共享的外部网站。但相反，创建一个工作片段（或小提琴）来重现您的问题 –

你想拖动此模式框布局只有头？ –

您必须使用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>

来源

2017-04-10 09:30:33

让父div可以与子div一起拖动div

回答

相关问题