Question

我有一个徽标网格。您可以双击徽标以摆脱它，也可以将其拖动到指定的方块，我希望它能够显示有关该徽标的一些细节。

以下是相关工具：

如果你能帮助我，我有两个问题：

当我将徽标拖到可放置的方格时，您如何推荐我收集有关该特定徽标的信息并显示可放置区域旁边的信息？
当我双击已放置在可放置区域的徽标时，该徽标将消失。消失后，如何再次重新定义该可投放区域并将其用于其他徽标？

如果你看到我可能搞砸了的任何其他信息，请让我知道更好的执行方式。非常感谢你！

以下是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; }

Answer 1

对于你的第一个问题..对我而言，这取决于：

a）您将显示多少信息，

b）存储信息的位置（在logo中的html？data属性？ajax？）

对我而言，这感觉更像是一个设计问题而不是任何东西，但是一旦我知道数据的位置和发展方向，我就会创建一个函数来检索它，将它放在一个模板中，并将其显示在页。然后挂钩你的drop回调。

对于你的第二个问题......看起来你只需要再次'启用'droppable。你的dblclick动画完成之后可能会有类似$('#droppable').droppable('enable')的内容，但我会查看jquery文档以了解具体内容。

删除当前项目后重新定义可放置区域

1 个答案: