面板不可拖動 - jquery UI

我正在構建一個項目，並在前端使用Bootstrap和Jquery Ui。
的的index.php文件是：面板不可拖動 - jquery UI

<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.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>";

這基本上定義了許多變量，我的主要頁面中使用。

而我資源/ 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我得到新聞面板可拖動，但天氣面板不可拖動。任何幫助將非常讚賞！
乾杯！

來源

2015-07-19 Ikari

正如你所指定的，您的可拖動的內容選擇是panel類：

$(".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();

來源

2015-07-19 10:33:54 Loqman

但是我有一個在我的天氣面板'panel'類，它是在**'weatherFectherForIndex.js' ** – Ikari

我定義已經更新了我的答案。試試看，讓我知道！ – Loqman

最近有點愚蠢的事情，我應該在哪裏添加它？ – Ikari

面板不可拖動 - jquery UI

回答

相關問題