3
我被困在下面，想知道是否有人可以幫助或指向正確的方向。Draggable和Droppable List
我在我的網站上有一個側面固定標籤，當它在菜單上單擊時顯示。在這個菜單上，我有一個圖像清單。
我想要實現的是用戶可以將圖像拖到我的網站正文上，然後將其移動並將其重新定位到任何他們想要的位置 - 我沒有任何實現此問題的困難，並且在使用之前使其工作這個UI可以拖動和拖拽。
但是我有是實現以下問題：
當圖像被從列表中拖動菜單上到身體上，我想要的是圖像的「克隆」，以保持菜單，以便在相同的圖像可以多次拖到身體上，從而在背景上產生許多相同的圖像。
我希望能夠將包含圖像列表的菜單摺疊/關閉回原來的位置，作爲網頁左側的固定選項卡.-我可以做到這一點，我遇到的問題是當我關閉菜單時，所有放置在頁面主體上的拖放圖像根據菜單移動的位置移動，我想要的是讓它們保持在我拖放的位置，而不管菜單是否是開放還是封閉。
我想要在菜單上有多個圖像，但每次只能顯示4個，所以當用戶點擊左按鈕和右按鈕div時會顯示更多圖像。
最後我在菜單上有一個叫做clear的按鈕，當點擊時清除身體上的所有拖動圖像（乾淨的石板）。
我的HTML是：
<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>
我jQuery是：
$(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
});
});
而且我的CSS是：
#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;
}
任何人都可以請大家幫忙，真的我堅持這一點。
感謝保羅