开发者

Getting attributes for an element on drag and drop events

开发者 https://www.devze.com 2023-04-05 16:09 出处:网络
What information should I expect in the out and drop events for a droppable div?I have two droppable container divs: container one with four nested elements, container two with one nested element.I dr

What information should I expect in the out and drop events for a droppable div? I have two droppable container divs: container one with four nested elements, container two with one nested element. I drag one element from container one into container two. In the out event for container one, I still find four nested elements. However, in the drop event for container two I find one element, but it happens to be the one that came from container one. So there are several problems:

  1. The information found in both events does not reflect the actual state of the containers.
  2. The out event doesn't reflect that elements were moved out.
  3. The drop event only shows the element being dropped.

Here is the HTML for the containers and the elements nested in them.

<div id="container1" class="comdiv ui-widget-content" style="position: absolute; top: 40px; left: 40px; width:350px; height:250px;"> 
    <p id="heading" class="comhd开发者_StackOverflowr 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> 

In javascript I loop through the nested elements with the .children and the .each functions like this $('#'+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); 

} 

Are there other events besides out and drop to get the right information about nested elements for drag and droppable divs? Is there a different function besides .children to get the nested elements for a drag and droppable div?

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号