我正试图制定一个小型方案,使用户能够把装备包放在一起,以树立一个装置的形象。 http://oliverdjones.com
http://oliverdjones.com/search/dragtester.html“rel=“nofollow”http://oliverdjones.com/search/dragtester.html。
我正在使用 j。 拖拉事件正在像预期的那样发挥作用,但我尚未能够扑灭 drop火,我完全没有想法。 该法典:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>drag test</title>
<style>
.content {width:100%; height:100%;position: absolute;}
#draggable img {width:100%}
.part1 {position:absolute;width:100px; z-index: 5; margin-top:15%; margin-left:57%;}
.drop1 {position:absolute;width:100px; height: 70px; z-index: 3; background-color:rgba(255,0,0,0.5);top:42%; left:45%; }
.dropped1 {position:absolute;width:100px; height: 70px; z-index: 3; background-color:rgba(255,255,255,0.5);top:42%; left:45%;}
.base {position:absolute; width: 17%; top:45%; left:42%;z-index: 2}
.status {position:absolute; width: 160px; border:#000 solid 2px; text-align:center; -webkit-border-radius: 12px; border-radius: 12px; color:#000; font-family: Arial, Helvetica, sans-serif; top:85%; left:30%; z-index:3}
</style>
<script src="js/jqueryui/js/jquery-1.7.2.min.js"></script>
<script src="js/jqueryui/js/jquery-ui-1.8.20.custom.min.js"></script>
<script src="js/jqueryui/js/jquery.ui.touch-punch.min.js"></script>
<script>
$(function() {
$( #draggable ).draggable({
containment: #content ,
drag: function(event, ui){
$( .status )
.addClass( ui-state-highlight )
.find( p )
.html( );
}
});
$( #droppable ).droppable({
accept: #draggable ,
drop: function( event, ui ) {
$.this.css({ background : white });
$( .status )
.addClass( ui-state-highlight )
.find( p )
.html( Good! );
}
});
});
</script>
</head>
<body>
<div class="content">
<img class="base"src="images/base.png" />
<div id="draggable" class="ui-widget-content part1">
<img src="images/part1.png" />
</div>
<div id="droppable" class="ui-widget-header drop1">
<div></div>
</div>
<div. class="status">
<p>Please Assemble</p>
</div>
</div><!-- /content -->
</body>