Question

当您点击按钮时，我正在尝试将“#div”中的div包含更改为“窗口”。我找不到办法做到这一点，所以我试图切换元素的类。

它会更改类，但不会影响包含。

我错过了什么吗？

这是一个例子（想法是红色框只能在蓝色区域拖动，但如果按下按钮，它可以被拖出它并返回再按下它）：

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

更改jquery包含onclick

0 个答案: