0

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

这是有问题的工具：

拖动或隐藏徽标

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

  1. 当我将徽标拖到可放置方块时，您建议我如何收集有关该特定徽标的信息并在可放置区域旁边显示信息？

  2. 当我双击已拖放到可拖放区域的徽标时，该徽标将消失。在它消失后，我怎样才能重新定义该可放置区域并将其用于其他徽标？

如果您看到我可能搞砸的任何其他信息，请告诉我更好的执行方式。太感谢了！

这是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; }
4

1 回答 1

1

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

a）您将显示多少信息，

b）该信息存储在哪里（在html中？logo的数据属性？ajax？）

对我来说，这感觉更像是一个设计问题，但一旦我知道数据在哪里以及它的去向，我就会创建一个函数来检索它，将它放入模板中，然后在页面上显示它。然后挂钩到您的 drop 回调。

对于您的第二个问题...看起来您只需要再次“启用”可放置。也许$('#droppable').droppable('enable')在你的 dblclick 动画完成之后，但我会查看 jquery 文档以了解具体信息。

于 2012-04-14T02:55:40.380 回答