0
동적으로 생성 된 draggable div의 새 위치를 저장하는 기능이 있습니다.동적으로 생성 된 draggable 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에서 작동합니다. 나는 경고 상자를 얻는다. 그러나 나는 또한 아약스를 통해 호출 된 PHP 스크립트에서 divs를 만듭니다. 경고 상자가 나타나지 않습니다. 이벤트 핸들러는 전체 클래스에 대해 정의됩니다. 이 스크립트에서 작성된 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>