Draggable and Droppable List

Question

I have a side fixed tab on my website and when it is clicked on a menu displays. On this menu I then have a list with images.

What I am trying to achieve is that a user can drag the image onto the body of my site and then move it and reposition it anywhere they want - I dont have any difficulty with achieving this and have got it working before using the ui draggable and droppable.

However the problems I am having is achieving the below:

When an image is dragged from the list on the menu onto the body, I wanted a 'clone' of the image to remain on the menu so that the same image can be dragged onto the body multiple times, resulting in numerous identical images on the background.

I want to be able to collapse/ close the menu containing the list of images back to its original position as a fixed tab on the left hand side of the webpage.- I can achieve this, the problem I have is that when I close the menu, all the dragged/dropped images I placed on the body of the page move position in accordance to the menu moving, what I want is for them to stay in the position I dragged/dropped them regardless of whether the menu is open or closed.

I wanted to have multiple images on the menu as well but only show 4 at a time so when the user clicks on the button left and button right divs more images are revealed.

Finally I have a button called clear on the menu that when clicked on removes all dragged images on the body (a clean slate).

My html is:

<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>

My jquery is:

$(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
});
});

And my css is:

#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;
            }

Answer 1

The default behavior of draggable is that the phantom that object that is dragged is the original object.

You have to use the helper option to define the object that is dragged. In your case this will be a new object in which you will put whatever needs to be dropped on the other side.

http://jqueryui.com/demos/draggable/#option-helper