jQuery Drag and Drop UI Limit Container Hover 1 IMG
I am trying to build a basic drag and drop print friendly photo gallery. I want to allow users to take 10 photos, arrange them anyway they want, then print them out. The code below does the basic drag and drop putting the photos/img into a div, but I can not limit the div to only accept 1 photo.
How can I fix it so when the img hovers over a div with an image, it does not allow for drop. I tried the disable function, but if you uncomment it, when an item get dropped and moved again, nothing can go back to that spot. The enable function does not fix that.
Help please :(
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var count = 0;
$(".shirts").draggable({helper: 'clone'});
$(".drop").droppable({
accept: ".shirts",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
$(this).append(ui.draggable);
// $(this).droppable('disable');
// $(this).droppable('enable');
}
});
});
</script>
<style type="text/css">
.drop{width:100px;min-height:109px;float:left;}
.allshirts{width:100%;border:1px solid #eee;min-height:140px;}
.shirts{float:left;width:100px;}
.blanket{width:510px;min-height:140px;margin:0px;padding:0px;}
.droppable-hover{background:#000;}
.clear{clear:both;}
</style>
</head>
<body>
<div class="allshirts drop">
<img class="shirts" src="images/tshirt_thumb1_thumb.png" />
<img class="shirts" src="images/tshirt_thumb2_thumb.png" />
<img class="shirts" src="images/tshirt_thumb3_thumb.png" />
<img class="shirts" src="images/tshirt_thumb4_thumb.png" />
<img class="shirts" src="images/tshirt_thumb1_thumb.png" />
<img class="shirts" src="images/tshirt_thumb2_thumb.png" />
<img class="shirts" src="images/tshirt_thumb3_thumb.png" />
<img class="shirts" src="images/tshirt_thumb4_thumb.png" />
<img class="shirts" src="images/tshirt_thumb1_thumb.png" />
<img class="shirts" src="images/tshirt_thumb2_thumb.png" />
<img class="shirts" src="images/tshirt_thumb3_thumb.png" />
<img class="shirts" src="images/tshirt_thumb4_thumb.png" />
</div>
<div class="clear"></div>
<div class="blanket">
<table cellpadding="0" cellspacing="0" border="1">
<td><div id="photo1" class="drop"></div></td>
<td><div id="photo2" class="drop"></div></td>
<td><div id="photo3" class="drop"></div></td>
<td><div id="photo4" class="drop"></div></td>
<td><div id="photo5" class="drop"></div></td>
开发者_StackOverflow社区 </tr>
<tr>
<td><div id="photo6" class="drop"></div></td>
<td><div id="photo7" class="drop"></div></td>
<td><div id="photo8" class="drop"></div></td>
<td><div id="photo9" class="drop"></div></td>
<td><div id="photo10" class="drop"></div></td>
</tr>
</table>
</div>
</body>
</html>
Crude but simple:
I also assumed that you want to let them rearrange and override their choices. So I added cloning of the original element.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var count = 0;
$(".shirts").draggable({helper: 'clone'});
$(".drop").droppable({
accept: ".shirts",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
if ($(this).html() == ""){
$(this).append($(ui.draggable).clone());
}else{
$(this).empty().append($(ui.draggable).clone());
}
}
});
});
</script>
<style type="text/css">
.drop{width:100px;min-height:109px;float:left;}
.allshirts{width:100%;border:1px solid #eee;min-height:140px;}
.shirts{float:left;width:100px;}
.blanket{width:510px;min-height:140px;margin:0px;padding:0px;}
.droppable-hover{background:#000;}
.clear{clear:both;}
</style>
</head>
<body>
<div class="allshirts drop">
<img class="shirts" src="images/tshirt_thumb1_thumb.png" />
<img class="shirts" src="images/tshirt_thumb2_thumb.png" />
<img class="shirts" src="images/tshirt_thumb3_thumb.png" />
<img class="shirts" src="images/tshirt_thumb4_thumb.png" />
<img class="shirts" src="images/tshirt_thumb1_thumb.png" />
<img class="shirts" src="images/tshirt_thumb2_thumb.png" />
<img class="shirts" src="images/tshirt_thumb3_thumb.png" />
<img class="shirts" src="images/tshirt_thumb4_thumb.png" />
<img class="shirts" src="images/tshirt_thumb1_thumb.png" />
<img class="shirts" src="images/tshirt_thumb2_thumb.png" />
<img class="shirts" src="images/tshirt_thumb3_thumb.png" />
<img class="shirts" src="images/tshirt_thumb4_thumb.png" />
</div>
<div class="clear"></div>
<div class="blanket">
<table cellpadding="0" cellspacing="0" border="1">
<td><div id="photo1" class="drop"></div></td>
<td><div id="photo2" class="drop"></div></td>
<td><div id="photo3" class="drop"></div></td>
<td><div id="photo4" class="drop"></div></td>
<td><div id="photo5" class="drop"></div></td>
</tr>
<tr>
<td><div id="photo6" class="drop"></div></td>
<td><div id="photo7" class="drop"></div></td>
<td><div id="photo8" class="drop"></div></td>
<td><div id="photo9" class="drop"></div></td>
<td><div id="photo10" class="drop"></div></td>
</tr>
</table>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论