可拖动和可放置列表

Question

我在我的网站上有一个固定在侧边的选项卡，当用户点击时会显示一个菜单。在这个菜单中，我有一个带有图片的列表。

我的目标是让用户能够把图片拖到网站主体上并随意移动和重新定位 - 我没有什么困难，并且以前已经用ui可拖动和可放置实现过此功能。

然而，我遇到的问题是：

当从菜单列表中拖动图片到主体时，我希望图片的'克隆'仍然保留在菜单中，使得相同的图片可以多次拖到主体上，结果背景上出现了许多相同的图像。

我想要能够将包含图片列表的菜单折叠/关闭回到原来左侧固定选项卡的位置 - 我可以实现这一点，但是我遇到的问题是，当我关闭菜单时，我在页面主体上放置的所有拖放图像会根据菜单移动而改变位置，我希望它们能保持我拖拽它们的位置，无论菜单是否打开或关闭。

我还想在菜单中放置多张图片，但一次只显示4张，因此当用户点击左侧和右侧按钮时，就会显示更多的图片。

最后，我在菜单中有一个名为“清除”的按钮，点击后会删除主体上的所有拖动图片（清空画布）。

我的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;
            }

- PK333

Answer 1

可拖动的默认行为是，被拖动的幻影对象是原始对象。

您必须使用helper选项来定义被拖动的对象。在您的情况下，这将是一个新对象，在其中放置需要放置在另一侧的任何内容。

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

- Samuel Rossille