Je suis en train d'essayer de créer une galerie photo de base, facile à glisser et à imprimer. Je veux permettre aux utilisateurs de prendre 10 photos, les arranger comme ils le veulent, puis les imprimer. Le code ci-dessous fait le glisser-déposer de base en mettant les photos/img dans un div, mais je ne peux pas limiter la div pour accepter seulement 1 photo.JQuery Drag and Drop Conteneur de limite d'interface utilisateur Hover 1 IMG
Comment puis-je résoudre ce problème lorsque le img survole une div avec une image, il ne permet pas de déposer. J'ai essayé la fonction de désactivation, mais si vous la décommentez, lorsqu'un élément est supprimé et déplacé à nouveau, rien ne peut revenir à cet endroit. La fonction enable ne corrige pas cela.
Aide s'il vous plaît :(
<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>
</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>
Merci bien que ce ne soit pas exactement ce que je cherche, car je devrais encore montrer quelles photos ont été utilisées par la classe = "allshirts". J'espérais enlever chaque chemise comme elle était utilisée, donc chaque photo est pas dupliqué, mais montré une fois et limité à une fois sur l'écran. Je suis sûr que je peux utiliser le ($ this) droppable ('disable') mais je sais qu'il me manque quelque chose. – John
Pour supprimer l'image une fois supprimée, remplacez: $ (ui.draggable) .clone() avec seulement votre ui.draggable d'origine. – Phil