Je suis coincé sur le ci-dessous et je me demandais si quelqu'un peut m'aider ou me diriger dans la bonne direction.Dragable et Droppable List
J'ai un onglet fixe côté sur mon site et quand il est cliqué sur une affiche de menu. Sur ce menu j'ai alors une liste avec des images. Ce que j'essaie de réaliser, c'est qu'un utilisateur peut faire glisser l'image sur le corps de mon site, puis le déplacer et le repositionner où bon lui semble - je n'ai aucune difficulté à le faire et je l'ai fait fonctionner avant d'utiliser l'ui draggable et droppable.
Cependant, les problèmes que je rencontrais réalise le ci-dessous:
Lorsqu'une image est tirée de la liste dans le menu sur le corps, je voulais un « clone » de l'image de rester dans le menu afin que la même image peut être traînée sur le corps plusieurs fois, résultant en de nombreuses images identiques sur le fond. Je veux pouvoir réduire/fermer le menu contenant la liste d'images à sa position d'origine comme un onglet fixe sur le côté gauche de la page Web. Je peux y parvenir, le problème que j'ai est que quand je ferme le menu, toutes les images glissées/déposées que j'ai placées sur le corps de la page se déplacent en fonction du mouvement du menu, ce que je veux, c'est qu'elles restent dans la position où je les ai glissées/lâchées est ouvert ou fermé.
Je voulais avoir plusieurs images dans le menu ainsi, mais seulement montrer 4 à la fois afin lorsque l'utilisateur clique sur le bouton gauche et le bouton droit divs plus d'images sont révélées.
Enfin j'ai un bouton appelé clair dans le menu que lorsque vous cliquez sur les images supprime toutes les traînés sur le corps (une ardoise propre).
Mon html est:
<div id="work-slide-menu">
<div id="work-slide-menu-tab">
<a href="#/!"></a>
</div>
<div id="work-slide-menu-content">
<span class="button left"></span><span
<ul>
<li><img class="sticker-picker" src="<?php bloginfo('stylesheet_directory'); ?>/images/cow.png" alt="" /></li>
<li><img class="sticker-picker" src="<?php bloginfo('stylesheet_directory'); ?>/images/chicken.png" alt="" /></li>
<li><img class="sticker-picker" src="<?php bloginfo('stylesheet_directory'); ?>/images/cloud.png" alt="" /></li>
<li><img class="sticker-picker" src="<?php bloginfo('stylesheet_directory'); ?>/images/dog.png" alt="" /></li>
<li><img class="sticker-picker" src="<?php bloginfo('stylesheet_directory'); ?>/images/heart.png" alt="" /></li>
<li><img class="sticker-picker" src="<?php bloginfo('stylesheet_directory'); ?>/images/monkey.png" alt="" /></li>
<li><img class="sticker-picker" src="<?php bloginfo('stylesheet_directory'); ?>/images/rabbit.png" alt="" /></li>
</ul>
<span class="button right"></span><span class="button clear"></span><span class="button close"></span>
</div>
</div>
Mon jquery est:
$(window).load(function() {
$("#work-slide-menu").css('left', '-800px');
$("#work-slide-menu-tab a").toggle(
function() {
$(this).text('Quick Contact Hide/Close [-]')
$("#work-slide-menu").animate({left: "100px"}, {queue:false, duration: 500, easing: 'linear'})
},
function() {
$(this).text('Quick Contact Show/Open [+]')
$("#work-slide-menu").animate({left: "-800px"}, {queue:false, duration: 500, easing: 'linear'})
}
);
});
$('#work-slide-menu-content span.button.clear').click(function()
{
stickersRemoveAll(true);
});
$('#work-slide-menu-content span.button.close').click(function()
{
$("#work-slide-menu").animate({left: "-800px"}, {queue:false, duration: 500, easing: 'linear'})
});
$(document).ready(function() {
$("img.sticker-picker").draggable({helper: 'clone', containment:'document', cursor:'move'});
$("body").droppable({
accept: ".img.sticker-picker",
cursor: 'move',
containment: 'document',
stop: stickerMoved
});
});
Et mon css est:
#work-slide-menu { position: fixed; left: -800px; top: 320px; width: 847px; z-index: 9998; }
#work-slide-menu-tab,
#work-slide-menu-content {
background: #ffc423;
}
#work-slide-menu span.button.left {
left: 0px;
background-position: left bottom;
}
#work-slide-menu span.button.right {
right: 45px;
background-position: left top;
}
#work-slide-menu span.button.clear {
top: 125px;
right: 195px;
width: 156px;
height: 38px;
background-image: url('images/button_stickersclear.png');
background-position: left top;
}
#work-slide-menu span.button.close {
top: 106px;
right: 63px;
width: 126px;
height: 57px;
background-image: url('images/button_stickersclose.png');
background-position: left top;
}
#work-slide-menu span.button {
display: block;
position: absolute;
top: 0px;
width: 82px;
height: 125px;
cursor: pointer;
background-image: url('images/stickers-navi.png');
}
#work-slide-menu-tab {
width: 47px;
height: 107px;
float: right;
}
#work-slide-menu-tab a {
display: block;
width: 100%;
height: 100%;
background:url(../img/view-all-work.png) no-repeat center;
}
#work-slide-menu-content {
width: 800px;
height:150px;
height: auto;
float: left;
}
#work-slide-menu-content ul {
list-style: none;
margin: 20px;
padding: 0;
height:140px;
}
#work-slide-menu-content ul li {
height: 125px;
margin: 0px 20px;
float: left;
}
#work-slide-menu-content ul li a {
color: #111;
text-decoration: none;
}
#work-slide-menu-content ul li a:hover {
color: #fff;
}
img.sticker
{
display: block;
position: absolute;
z-index: 3;
}
img.sticker-dropped
{
display: block;
position: absolute;
z-index: 18;
}
Quelqu'un peut-il s'il vous plaît aider, vraiment je suis bloqué sur celui-ci.
Merci Paul