使用Child div使父div可拖动

Question

如何使用子div使父div可拖动？

我正在使用jquery-ui draggable函数。我在网站上找不到关于我的问题的任何内容，所以我在这里问。

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

  

以下是一个工作示例：

＆＃13;

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;