Изменить JQuery сдерживание по клику
Я пытаюсь изменить содержимое 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>