Панель не перетаскивается - 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 для панели погоды.

Update:

Поскольку вы создаете панель погоды на лету вы должны сделать его перетаскивать после его создания. После добавления панели погоды в 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

I обновили мой ответ. Попробуйте и дайте мне знать! – Loqman

Немного глупое в последнее время, где я должен добавить его? – Ikari

Панель не перетаскивается - JQuery UI

ответ

Смежные вопросы