0

ドロップ可能な div の out イベントと drop イベントで期待できる情報は何ですか? ドロップ可能なコンテナー div が 2 つあります。コンテナー 1 には 4 つのネストされた要素があり、コンテナー 2 には 1 つのネストされた要素があります。1 つの要素をコンテナー 1 からコンテナー 2 にドラッグします。コンテナー 1 の out イベントには、まだ 4 つのネストされた要素があります。ただし、コンテナー 2 のドロップ イベントで 1 つの要素を見つけましたが、それはたまたまコンテナー 1 からのものでした。したがって、いくつかの問題があります。

  1. 両方のイベントで見つかった情報は、コンテナーの実際の状態を反映していません。
  2. out イベントは、要素が移動されたことを反映していません。
  3. ドロップ イベントは、ドロップされる要素のみを表示します。

コンテナとコンテナにネストされた要素の HTML は次のとおりです。

<div id="container1" class="comdiv ui-widget-content" style="position: absolute; top: 40px; left: 40px; width:350px; height:250px;"> 
    <p id="heading" class="comhdr editableText">Container 1</p> 

    <br/> 
    <div id="u0014" class="comurl"><img class="dhandle" src="http://www.google.com/s2/favicons?domain=tf1.fr" align="middle" />&nbsp;<a href="http://tf1.fr" target="_blank">TF1.fr</a>  
    </div> 
    <div id="u0015" class="comurl"><img class="dhandle" src="http://www.google.com/s2/favicons?domain=www.aol.com" align="middle" />&nbsp;<a href="http://www.aol.com" target="_blank">AOL.com</a> 
    </div> 
    <div id="u0016" class="comurl"><img class="dhandle" src="http://www.google.com/s2/favicons?domain=www.facebook.com" align="middle" />&nbsp;<a href="http://www.facebook.com" target="_blank">Facebook.com</a> 
    </div> 
    <div id="u0017" class="comurl"><img class="dhandle" src="http://www.google.com/s2/favicons?domain=msn.com" align="middle" />&nbsp;<a href="http://www.msn.com" target="_blank">MSN.com</a>  
    </div> 

</div> 

<div id="container2" class="comdiv ui-widget-content" style="position: absolute; top: 40px; left: 240px; width:350px; height:250px;"> 
    <p id="heading" class="comhdr editableText">Container 2</p> 

    <br/> 
    <div id="u0018" class="comurl"><img class="dhandle" src="http://www.google.com/s2/favicons?domain=google.com" align="middle" />&nbsp;<a href="http://google.com" target="_blank">Google.com</a>  
    </div> 

</div>

JavaScript では、入れ子になった要素を と.childrenthis の.eachような関数でループし$('#'+divid).children('div').children('div').each()ます。

function update_urls(divid) { 

   // add urls 

    var url = ''; 
    var urlname = ''; 
    var urllink = ''; 
    var urlid = ''; 
    $('#'+divid).children('div').children('div').each(function () { 

    url = $(this).find('a'); 
    urlname = url.text(); 
    urllink = url.attr('href'); 
    urlid = $(this).attr('id'); 

    alert("urlid "+urlid+" urlname "+urlname+" urllink "+urllink); 

}

ドラッグ アンド ドロップ可能な div のネストされた要素に関する正しい情報を取得するために、アウト アンド ドロップ以外に他のイベントはありますか? .childrenドラッグ アンド ドロップ可能な div のネストされた要素を取得する以外に、別の関数はありますか?

4

0 に答える 0