使用可拖放功能顯示div

我的代碼按計劃運行，除了一件事情。當你點擊暗灰色框時，橙色框將顯示show（）;.使用可拖放功能顯示div

但是，我想要在橙色框上放置藍色可拖動div時出現紫色框。這似乎並不奏效。

我給你的問題是爲什麼不在drop函數中工作，當它工作在上面幾行時，我該怎麼做這個工作？

我試着把紫色的div放在橙色的裏面，但是它只顯示一次...... 任何幫助都很值得讚賞，讓我知道你何時不瞭解我。

JsFiddle（問題是在投擲的功能）

jQuery的

$('.lightgray').hover(

function() { 
    $(this).find('.darkgray').fadeTo('fast', 0.5); 
}, function() { 
    $(this).find('.darkgray').fadeOut('fast'); 
}); 

$('.lightgray').bind("click", function(event) { 

    $(this).find('.orange').show(); 
    $(this).unbind('hover'); 
}); 


$("#draggable_blue").draggable({ 

    revert: true 
}); 


$('.orange').hover(

function() { 
    $(this).find('.darkgray').fadeTo('fast', 0.5); 
}, function() { 
    $(this).find('.darkgray').fadeOut('fast'); 
}); 


$(".orange").droppable({ 
    drop: function() { 
     $(this).find('.purple').show(); 
    } 
});

的Html

<div id="wrapper"> 
<div id="container"> 

<div class="lightgray"> 

    <div class="darkgray"> 
    </div> 

    <div class="orange"> 
    </div> 
    <div class="purple"> 
    </div> 

</div> 

<div class="lightgray"> 

    <div class="darkgray"> 

    </div> 
     <div class="orange"> 

    </div> 
</div> 
<div class="lightgray"> 

    <div class="darkgray"> 
    </div> 
     <div class="orange"> 

    </div> 
</div> 
<div class="lightgray"> 
    <div class="darkgray"> 

    </div> 
     <div class="orange"> 

    </div> 
</div> 
    <div class="orange"> 

    </div> 
<div class="lightgray"> 

    <div class="darkgray"> 

    </div> 
    <div class="orange"> 

    </div> 
</div> 
<div class="lightgray"> 

    <div class="darkgray"> 
     </div> 
     <div class="orange"> 

    </div> 

</div> 

<div class="lightgray"> 

    <div class="darkgray"> 

    </div> 
<div class="orange"> 

    </div> 
    </div> 


<div class="lightgray"> 
    <div class="darkgray"> 

    </div> 

<div class="orange"> 

    </div> 
</div> 


     <div id="menu"> 
      <div id="draggable_blue"> 
      </div> 
     </div> 
</div> 
</div>

來源

2012-11-26 Opoe

試試這個

$(this).parent().find('.purple').show();

這裏是小提琴..

http://jsfiddle.net/uTLUm/2/

.find()得到每個元素的後代在當前匹配的元素。所以$(this).find()，你在div.orange內搜索，因爲你的div.purple就在外面。它將無法找到div.purple。

我添加了parent()，使其搜索當前div.lightgray內，因此找到紫色格...

來源

2012-11-26 12:44:43 bipen

謝謝你的回答！ – Opoe

但如果我把紫色的div放在橙色的div裏面，它只能工作一次。你能解釋我是怎麼發生的嗎？謝謝 – Opoe

好吧，這是越來越iinteressting .. :) ..只有戰鬥過一次??我沒有得到你......你的意思是'紫色'shuld改變爲灰色（watever）whoumouusehover太..或所有的lightgray divs應該變成紫色..我想通了....只有第一個'lightgray div'有紫色的div ...所以它只適用於第一個...無論如何讓我知道你的問題...'會幫助你 – bipen

入住此更新您的jsfiddle

........ 
$(".orange").droppable({ 
    drop: function() { 
     $(this).hide(); 
     $(this).find('.purple').show(); 
    } 
});

http://jsfiddle.net/uTLUm/4/

來源

2012-11-26 12:46:52 kidwon

謝謝你的回答 – Opoe

使用可拖放功能顯示div

回答

相關問題