javascript - 删除当前元素后重新定义可放置区域

Question

我有一个 Logo 网格。您可以双击 Logo 将其删除，也可以将其拖动到指定的方 block ，我希望它显示有关该 Logo 的一些详细信息。

这是有问题的工具:

Drag or Hide a Logo

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

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

2. 当我双击已放置到可放置区域的 Logo 时，该 Logo 将消失。消失后，如何重新定义那个可放置区域，用于其他logo？

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

这是 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) 该信息存储在哪里(在 html 中？ Logo 的数据属性中？ajax？)

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

对于你的第二个问题......看起来你只需要再次“启用”可放置。在你的 dblclick 动画完成后，可能会像 $('#droppable').droppable('enable') 这样的东西，但我会查看 jquery 文档以了解相关细节。