Getting attributes for an element on drag and drop events
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:
- The information found in both events does not reflect the actual state of the containers.
- The out event doesn't reflect that elements were moved out.
- 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" /> <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" /> <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" /> <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" /> <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" /> <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?
精彩评论