刪除當前項目後重新定義可投放區域

我有一個徽標網格。您可以雙擊徽標以擺脫它，也可以將其拖動到指定的正方形中，我希望該正方形可以顯示有關該徽標的一些詳細信息。刪除當前項目後重新定義可投放區域

這裏是有問題的工具：

我有兩個問題，如果你能請幫助我：

當我拖動一個標誌，可放開方，怎麼會您推薦我收集有關該特定徽標的信息並在可投放區域旁邊顯示信息？
當我雙擊已經放置在可投放區域的徽標時，該徽標將消失。消失後，如何重新定義可丟棄區域並將其用於其他徽標？

如果你看到我可能會搞砸了，請讓我知道執行的更好的辦法的任何其他信息。非常感謝！

這裏是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; }

來源

2012-04-14 Michael Rader