0
我有一个函数来保存动态创建的可拖动div的新位置。为动态创建的可拖动div保存新位置
<script type="text/javascript">
$(document).ready(function() {
$(".comdiv").draggable(
{
drag: function(event, ui) {
$(".comdiv").css("opacity", "0.6"); // Semi-transparent when dragging
},
stop: function(event, ui) {
alert ('Finished dragging!');
$(".comdiv").css("opacity", "1.0"); // Full opacity when stopped
},
});
});
</script>
这适用于HTML页面正文中定义的静态div。我收到警告框。但我也通过ajax调用了一个php脚本来创建div。警告框不提供这些。事件处理程序是为整个类定义的。有没有不同的方式调用该脚本中创建的div的函数？警报框不会为他们提供。
<?php
function get_nodes() {
// load SimpleXML
$nodes = new SimpleXMLElement('communities.xml', null, true);
foreach($nodes as $node) // loop through
{
echo "<div id = '".$node['ID']."' class= 'comdiv ui-widget-content' style = 'top: ".$node->TOP."px; left: ".$node->LEFT."px;
width: ".$node->WIDTH."px; height: ".$node->HEIGHT."px;'> \n";
echo " <p class = 'comhdr editableText ui-widget-header'>".$node->NAME."</p>\n";
echo " <a href='#' onClick=\"delete_div('".$node['ID']."');\">Delete</a> \n";
echo " <a href='#' onClick=\"add_url('".$node['ID']."');\">Add URL</a> \n";
foreach($node->URLS->URL as $url)
{
echo " <div id='".$url['ID']."' class='comurl'><a href='".$url->URLC."' target='_blank'>".$url->NAME."</a><img
align='right' src='redx.png' onClick='delete_url(\'".$url['ID']."\');'/></div>";
/* echo "<script type='text/javascript'> alert('Node: ".$node['ID']." has URLS:".$url['ID']." ".$url->NAME." ".$url->URLC."
'); </script>"; */
}
echo "</div> \n";
echo "<script type='text/javascript'>\n";
echo " $('#".$node['ID']."').resizable();\n";
echo " $('#".$node['ID']."').draggable();\n";
echo " $('#".$node['ID']."').draggable('option', 'handle', '.comhdr');\n";
echo "</script>\n";
}
echo "<script type='text/javascript'>\n";
echo " $('.editableText').editableText();\n";
echo "</script>\n";
return;
}
echo get_nodes();
?>
这里是HTML。
<body>
<div style="top:450px; width:120px; height:120px; left:800px; background:red;"></div>
<!-- THE ALERT BOX COMES UP IF I DRAG THIS DIV -->
<div id="editdiv" class="comdiv ui-widget-content" style="position: absolute; top: 150px; left: 850px; width:350px; height:250px; border:1px solid grey;">
<p id="heading" class="comhdr editableText ui-widget-header">Editable</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
//define php info and make ajax call to recreate divs from XML data
$.ajax({
url: "get_nodes.php",
type: "POST",
data: { },
cache: false,
success: function (response) {
if (response != '')
{
$(document.body).append(response);
}
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".comdiv").draggable(
{
drag: function(event, ui) {
$(".comdiv").css("opacity", "0.6"); // Semi-transparent when dragging
},
stop: function(event, ui) {
alert ('Finished dragging!');
$(".comdiv").css("opacity", "1.0"); // Full opacity when stopped
},
});
});
</script>
</body>
</html>