Question

我有一个函数来保存动态创建的可拖动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>&nbsp;&nbsp;\n";
        echo "   <a href='#' onClick=\"add_url('".$node['ID']."');\">Add URL</a>&nbsp;&nbsp;\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>

Answer 1

需要在包含XML的文件夹和xml本身上设置权限。这是为所有者，系统，iis用户和用户做的。

保存动态创建的可拖动div的新位置

1 个答案: