Question

我正在构建一个项目并使用Bootstrap和Jquery Ui作为前端。
index.php 文件是：

<html>
    <head>
        <script src="weatherModule/weatherFetcherForIndex.js"></script>
        <?php
            include "resources/resources.php";
            echo $bootstrap;
            include "NewsFeed/CnnNewsFeed.php";
            $cnn = new CnnNewsFeed("world");
            $feed = $cnn->getRss();
            echo $jquery_ui;
        ?>
        <script src="resources/dragable.js"></script>
    </head>
    <body>
    <?php
    //navbar
    echo $navbar;
    $items = $feed->channel->item;
    ?>
    <div id="temp" style="width: 30%; height: 7%; margin-top: 6.5%;">

    </div>
    <?php
    echo $cnnNewsHeader;
    for($i = 0; $i <= 2+1; $i++)
    {
        echo "<a href='". $items[$i]->guid ."' class='list-group-item'>
            <h4 class='list-group-item-heading'>" . $items[$i]->title . "</h4>
                    <p class='list-group-item-text'>" . $items[$i]->description . "</p>
                </a>";
    }
    echo $cnnNewsFooter;
    ?>
    </body>
</html>

你可以跳过完美运行的天气部分。而 resources / resources.php 文件是：

<?php
/**
 * Created by PhpStorm.
 * User: root
 * Date: 11/7/15
 * Time: 10:42 AM
 */
$jquery_ui = '<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>';
$weather_icons = "<link src='http://startyour.club/weather-icons/css/weather-icons.css' type='text/css' rel='stylesheet' />";
$bootstrap = "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
        <link rel=\"stylesheet\" href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css\">
        <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>
        <script src=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js\"></script>";

$navbar = "<nav class= \"navbar navbar-default\">
        <div class=\"container-fluid\">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class=\"navbar-header\">
                <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#bs-example-navbar-collapse-1\" aria-expanded=\"false\">
<span class=\"sr-only\">Toggle navigation</span>
                    <span class=\"icon-bar\"></span>
                    <span class=\"icon-bar\"></span>
                    <span class=\"icon-bar\"></span>
                </button>
                <a class=\"navbar-brand\" href=\"#\">Project</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class=\"collapse navbar-collapse\" id=\"bs-example-navbar-collapse-1\">
                <ul class=\"nav navbar-nav\">
                    <li class=\"active\"><a href=\"#\">Home <span class=\"sr-only\">(current)</span></a></li>
                    <li><a href=\"#\">News</a></li>
                    <li><a href=\"#\">Weather</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>";
$navbar_for_weather = "<nav class= \"navbar navbar-default\">
        <div class=\"container-fluid\">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class=\"navbar-header\">
                <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#bs-example-navbar-collapse-1\" aria-expanded=\"false\">
<span class=\"sr-only\">Toggle navigation</span>
                    <span class=\"icon-bar\"></span>
                    <span class=\"icon-bar\"></span>
                    <span class=\"icon-bar\"></span>
                </button>
                <a class=\"navbar-brand\" href=\"#\">Project</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class=\"collapse navbar-collapse\" id=\"bs-example-navbar-collapse-1\">
                <ul class=\"nav navbar-nav\">
                    <li><a href=\"#\">Home</a></li>
                    <li><a href=\"#\">News</a></li>
                    <li class=\"active\"><a href=\"#\">Weather <span class=\"sr-only\">(current)</span></a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>";
$cnnNewsHeader = "<div class=\"col-sm-4\" style=\"margin-left: 65%; margin-top: 2.5%;\">
            <div class=\"panel panel-default\">
                <div class=\"panel-heading\">
Cnn News
</div>
                <div class=\"panel-body\">
                        <div class=\"list-group\">";

$cnnNewsFooter = "</div>
                </div>
            </div>
        </div>";

这基本上定义了在我的主页面中使用的许多变量。

我的 resources / dragable.js 是：

$(function() {
    $( ".panel" ).draggable();
});

我的 weatherFetcherForIndex.js 如下：

/**
 * Created by root on 11/7/15.
 */
navigator.geolocation.getCurrentPosition(GetLocation);
function GetLocation(location) {
    var long = location.coords.longitude;
    var lat = location.coords.latitude;
    $.post("weatherModule/jsPhpInterface.php", {lat: lat, lon: long})
        .done(function (data) {
            var parsedJSON = JSON.parse(data);
            $("#temp").html
            (
                "<div class='panel panel-primary'>" +
                "<div class='panel-heading'>" +
                "Temperature" +
                "</div>" +
                "<div class='panel-body'>"
                +
                parsedJSON.data.current_condition[0].FeelsLikeC + "° C" +
                "</div>" +
                "</div>" +
                "</div>"
            );
        });
}

当我打开我的index.php时，我可以将新闻面板拖放，但天气面板不可拖动。任何帮助都会非常感激!!!!
的干杯！

Answer 1

如您所指定，可拖动内容的选择器为panel class：

$( ".panel" ).draggable();

但是你的天气预报板没有panel课程。您必须选择具有正确班级名称的天气预警面板，或将panel班级名称添加到天气预报板。

<强>更新

因为您正在创建天气面板，所以在创建后必须使其可拖动。将天气面板添加到DOM后，必须使用$(".panel").draggable();使其可拖动。

在更改html元素的temp内容后添加：

$("#temp").html
(
    "<div class='panel panel-primary'>" +
    "<div class='panel-heading'>" +
    "Temperature" +
    "</div>" +
    "<div class='panel-body'>"
    +
    parsedJSON.data.current_condition[0].FeelsLikeC + "° C" +
    "</div>" +
    "</div>" +
    "</div>"
);
$('.panel').draggable();

面板不可拖动 - Jquery UI

1 个答案: