我想把div放到另一个div中。当我这样做时，我希望更大的div更小，我想打电话给alert ('div is here')。与班级＆＃34;测试＆＃34;应该使用＆＃34; ui-widget-content＆＃34;放入div中。和＃34;可拖动＆＃34;类。与班级＆＃34;测试＆＃34;应该通过类＆＃34; ui-widget-content＆＃34;放入div中。和＃34;可拖动＆＃34;。这是代码：
CSS
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 1200px;
margin: auto;
}
.clearfix {
clear: both;
}
ul {
list-style: none;
}
ul li {
display: inline-block;;
float: left;
}
/*
.draggable {
width: 280px;
height: 100px;
padding: 0.5em;
}
*/
.draggable {
height: 100px;
width: 280px;
padding: 0.5em;
background-color: green;
/*position: fixed;
overflow: hidden;
/* outer shadows (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
/* gradients */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, green), color-stop(15%, green), color-stop(100%, #D7E9F5));
background: -moz-linear-gradient(top, green 0%, green 0%, #D5E4F3 130%);
}
.pgboody {
width: 100%;
height: 400px;
border:1px solid red;
}
p {
margin-top: 0;
}
.test {
margin: 20px auto;
display: block;
width: 150px;
height: 370px;
line-height: 20px;
padding-top: 38px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #F0F0F0;
box-sizing: border-box;
text-align: center;
resize: both;
overflow: auto;
position: relative;
/* gradients - second red border, first red border, top white space, blue lines */
background-image: -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -webkit-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-image: -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -moz-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-image: -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -ms-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-image: -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -o-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-image: linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-size: 1px, 1px, auto, auto 20px;
background-repeat: repeat-y, repeat-y, no-repeat, repeat;
background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.test:first-line {
line-height: 33px;
vertical-align: baseline;
}
.test:focus {
outline: none;
}
HTML
$(function() {
$( "#student1" ).draggable();
$( "#student2" ).draggable();
$( "#student3" ).draggable();
$( "#student4" ).draggable();
});
</script>
</head>
<body>
<div class="container">
<ul class="">
<li>
<div class="ui-widget-content draggable">
<p>Student 1 </p>
<div id="student1" class="test">
this note from student 1
</div>
</div>
</li>
<li>
<div class="ui-widget-content draggable">
<p>Student 2</p>
<div id="student2" class="test">
this note from student 1
</div>
</div>
</li>
<li>
<div class="ui-widget-content draggable">
<p>Student 3</p>
<div id="student3" class="test">
this note from student 1
</div>
</div>
</li>
<li>
<div class="ui-widget-content draggable">
<p>Student 4</p>
<div id="student4" class="test">
this note from student 1
</div>
</div>
</li>
<div class="clearfix"></div>
</ul>
</div>
<div class="container">
<div class="pgboody">
</div>
</div>
<div class="container">
<ul class="">
<li>
<div class="ui-widget-content draggable">
<p>Student 5 </p>
<!-- <div id="student5" class="test">
this note from student 1
</div> -->
</div>
</li>
<li>
<div class="ui-widget-content draggable">
<p>Student 6</p>
<!-- <div id="student6" class="test">
this note from student 1
</div> -->
</div>
</li>
<li>
<div class="ui-widget-content draggable">
<p>Student 7</p>
<!-- <div id="student7" class="test">
this note from student 1
</div> -->
</div>
</li>
<li>
<div class="ui-widget-content draggable">
<p>Student 8</p>
<!-- <div id="student8" class="test">
this note from student 1
</div> -->
</div>
</li>
<div class="clearfix"></div>
</ul>
</div>
</body>
</html>