我有一个徽标网格。您可以双击徽标以摆脱它,也可以将其拖动到指定的正方形,我希望它可以显示有关该徽标的一些详细信息。
这是有问题的工具:
如果你能帮助我,我有两个问题:
当我将徽标拖到可放置方块时,您建议我如何收集有关该特定徽标的信息并在可放置区域旁边显示信息?
当我双击已拖放到可拖放区域的徽标时,该徽标将消失。在它消失后,我怎样才能重新定义该可放置区域并将其用于其他徽标?
如果您看到我可能搞砸的任何其他信息,请告诉我更好的执行方式。太感谢了!
这是jQuery:
<script>
$(document).ready(function() {
$('.imageShowing').dblclick (function() {
$(this).stop().animate({
zIndex: '1',
height: '100',
width: '140',
}, 100, function() {
$(this).rotate({ angle:0,animateTo:90,easing: $.easing.easeInOutExpo })
$(this).stop().animate({
zIndex: '1',
top: '500',
opacity: '0'
}, 700, function() {
$(this).hide("fast");
// Animation complete.
});
});
});
}); //end document.ready
$(init);
function init(){
$('.imageShowing').draggable( {
containment: '#wrapper',
cursor: 'move',
snap: '#droppable',
stop: cardDropped,
start: objectGrabbed,
revert: true,
});
$('#droppable').droppable( {
drop: handleCardDrop,
hoverClass: 'droppableHover',
accept: '.imageShowing'
});
}
function objectGrabbed(event, ui) {
$(this).stop().animate({
zIndex: '100',
},0,function() {
$(this).stop().animate({
opacity: '.5'
}, 500);
});
}
function cardDropped() {
$(this).stop().animate({
opacity: '1',
zIndex: '12'
}, 500);
}
function handleCardDrop( event, ui ) {
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
}
</script>
如果你需要,还有 CSS:
#wrapper { width: 1000px; margin: 0 auto; height: 1000px; position: relative;}
#grid {width: 935px; height: 536px; margin: auto; background: url(images/gridLine.png) repeat-y top; padding:0; position: relative; z-index: 5;} /* height equals 134 X 4. Each horizontal grid is 134 in height and 950px in width */
#logoWrapper {position: absolute; top: 2px; left: 36px }
#logoWrapper ul {text-decoration: none; list-style-type: none; margin:0; padding:0; }
#logoWrapper ul li {list-style-type: none; float: left; position: relative; padding: 0 6px 6px 0; height: 128px; width: 180px; margin: 0;}
#logoWrapper ul li img { margin:0; position: absolute; z-index: 6;}
#bottom { height: 500px; width: 950px; background: #fff; margin: 0 auto; position: relative; z-index: 10;}
#droppableWrapper {border: dashed 5px #666; width: 180px; margin:0 auto; }
#droppable {height: 128px; width: 180px; background: #CCC;};
.droppableHover {background: #333; }