3
나는 아래에 붙어있어 누군가가 올바른 방향으로 나를 도울 수 있는지 궁금해하고 있었다.Draggable 및 Droppable List
내 웹 사이트에 고정 탭이 있으며 클릭하면 메뉴가 표시됩니다. 이 메뉴에서 나는 이미지 목록을 가지고있다.
사용자가 내 사이트 본문에 이미지를 드래그 한 다음 원하는 위치로 옮길 수 있습니다.이를 달성하는 데 어려움이 없으며 사용하기 전에 문제가 없습니다. draggable하고 droppable UI가.
그러나 나는 아래에 달성되는 데 문제 : 이미지가 몸에 메뉴에있는 목록에서 드래그
, 나는 그래서 메뉴에 남아 이미지의 '클론'을 원했다 동일한 이미지가 여러 번 몸에 드래그 될 수 있으므로 배경에 수많은 이미지가 생깁니다.
웹 페이지의 왼쪽에 고정 탭으로 원래 위치로 이미지 목록이 포함 된 메뉴를 축소/닫을 수 있기를 원합니다 .-이 문제를 해결할 수 있습니다. 문제가 있습니다. 내가 메뉴를 닫을 때, 페이지의 몸체에 놓인 모든 드래그/드롭 된 이미지는 메뉴 이동에 따라 위치를 이동하며, 내가 원하는 것은 메뉴에 관계없이 드래그/드롭 한 위치에 머무르는 것입니다. 열려 있거나 닫혀 있습니다.
메뉴에 여러 이미지가 있지만 한 번에 4 개만 표시하고 싶었으므로 사용자가 왼쪽 버튼과 오른쪽 버튼을 클릭하면 더 많은 이미지가 표시됩니다.
마지막으로, 버튼을 클릭하면 몸에있는 모든 드래그 이미지 (깨끗한 슬레이트)가 제거되는 메뉴에 clear라는 버튼이 있습니다.
<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는 다음과 같습니다
내 HTML은
#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;
}
사람이 도와주세요 수, 정말이 하나 붙어있다.
감사 폴