0

当您单击按钮时，我正在尝试将 div 包含从“#div”更改为“window”。我找不到这样做的方法，所以我尝试切换元素的类。

它改变了类，但不影响收容。

我错过了什么吗？

这是一个示例（想法是红色框只能在蓝色区域中拖动，但如果按下按钮，则可以将其拖出并返回再次按下）：

$(function() {
  $("#draggable").draggable();
});

$(function() {
  $('.float').draggable({
    containment: "body"
  });
});

$(function() {
  $('.unfloat').draggable({
    containment: "#desktop"
  });
});

$(window).load(function() {
  $(document).ready(function() {
    $('#button').click(function() {
      $(this).parent().toggleClass('unfloat');
      $(this).parent().toggleClass('float');
    });
  });
});
html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	background-color: #000;

}

#desktop {
	background-color: #00aaff;
	width: 70%;
	height: 70%;
}

#draggable {
	width: 200px;
	height:200px;
	background-color: #ff0000;
	margin: 0px;
}

#button {
	width: 100px;
	height: 30px;
	float: right;
	background-color: #bababa;
	margin: 5px 5px 0px 0px;
}
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>

<div id="desktop" >

	<div id="draggable" class="float">
		<div id="button" onClick="">Toggle</div>
	</div>

</div>

</body>
</html>

4

0 回答 0