时间戳

首页 > 解决方案 > 无法让 Packery 库工作（未捕获的类型错误：$(...).packery 不是函数）

javascript - 无法让 Packery 库工作（未捕获的类型错误：$(...).packery 不是函数）

问题描述

我已经使用 npm 安装了 draggabilly 和 packery，并且还在我的 charts.php 文件和 c_head.php （在所有页面上加载）中都包含了一个直接链接，但我不断收到错误消息。. . 未捕获的 TypeError: $(...).packery 不是函数。我也尝试过使用香草 JS 代码（新 Packery() 而不是 .packery），但这只是给出了未定义 Packery() 的错误。有什么建议么？

https://packery.metafizzy.co/draggable.html

（此处的 js 代码给出“.packery 不是函数”错误） https://codepen.io/desandro/pen/aGvIq

（此处的 js 代码给出“Packery not defined”错误） https://codepen.io/desandro/pen/ciAdD

c_head.php

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Factor Viewer"/>

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
    manifest.json provides metadata used when your web app is installed on a
    user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->

<!--
nlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
    work correctly both with client-side routing and a non-root public URL.
    Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- <link class='responsive_css'

<link rel='stylesheet' type='text/css'  media='only screen and (min-width:737px) and (max-width:880px)' href='css/screen_layout_medium.css'/>
<link rel='stylesheet' type='text/css'  media='only screen and (min-width:50px) and (max-width:736px)' href='css/screen_layout_small.css'/>
<link rel='stylesheet' type='text/css'  media='only screen and (max-height:440px)' href='css/screen_layout_small.css'/>
-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel='stylesheet' type='text/css' href='css/style.css'/> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type='text/javascript' src='js/scripts.js'></script>
<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>

图表.php

<?php
include_once("c_session.php");
include_once("c_connection.php");
//echo "HERE" . "\n";
//echo $connection->host_info . "</br>\n";
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
<?php include_once("c_head.php"); ?>
        <!--All page specific code goes below this line -->
        <title>Charts</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
        <script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
        <script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
    </head>
    <?php
// start check if queries are needed 
    // if ($_SESSION['didQueries']) {
    //     $doQueries = 0;
    //     echo "NO queries";
    // } else {
    //     $doQueries = 1; 
    //     $_SESSION['didQueries'] = true;
    //     echo "need queries";
    // }

    // session_destroy();
    // end check if queries are needed
    ?>
    <body>
        <div id="page"> 
 <?php include_once("c_navigation.php"); ?>
          
<?php
// start query 1: get 6 sets of prices
if ($doQueries) {
$sqlPriceData = "SELECT lid, `date`, price from fv_price where lid in (412, 413, 1247, 5001, 531, 5002)  order by lid, `date`;";
$resPriceData = $connection->query($sqlPriceData);

    while ($row = mysqli_fetch_array($resPriceData)) {
        $priceData[] = $row;
    }

    $_SESSION['$FundPriceData'] = $priceData;
} else {
    $priceData = $_SESSION['$FundPriceData'];
} // end if

// initialize php arrays to populate and use for chart
$dates = array_column($priceData, 'date');
$Prices = array_column($priceData, 'price');


// arrays used for chart must be reversed and json_encoded
$chart_dates = json_encode(array_reverse($dates));
$chart_Prices = json_encode(array_reverse($Prices));
?>
   
<div class="grid">
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
</div>

                <div id="charts_div" class="border"> <!--  start charts div -->
                    <div id="chart1" class="border draggable mini_chart"> <!-- start chart1  -->
                    </div> <!-- end chart1  -->        
                    <div id="chart2" class="border draggable mini_chart"> <!-- start chart2  -->
                    </div> <!-- end chart2  -->
                    <div id="chart3" class="border draggable mini_chart"> <!-- start chart3  -->
                    </div> <!-- end chart3  -->
                    <div id="chart4" class="border draggable mini_chart"> <!-- start chart4  -->
                    </div> <!-- end chart4  -->
                    <div id="chart5" class="border draggable mini_chart"> <!-- start chart5  -->
                    </div> <!-- end chart5  -->
                    <div id="chart6" class="border draggable mini_chart"> <!-- start chart6  -->
                    </div> <!-- end chart6  -->
                </div>  <!--  end charts div -->
        
                <!-- start call drawChart functions -->
                <script>
                    drawChart('chart1', 'Fund', '<?= $code ?>', '<?= $lid ?>', <?= $chart_dates ?>, <?= $chart_Prices ?>)
                </script> <!-- end call drawChart functions -->
        </div> <!-- page -->
    </body>     
</html>

脚本.js

//********** START DRAGGABLE SCRIPTS **********
//#region
// https://mdbootstrap.com/docs/standard/plugins/drag-and-drop/
// this plain jQuery works for dragging elements
// $( function() {
//     $( ".draggable" ).draggable({ containment: "#charts_div" });
//   } );

var $grid = $('.grid').packery({
    itemSelector: '.grid-item',
    columnWidth: 100
  });
  
  // make all grid-items draggable
  $grid.find('.grid-item').each( function( i, gridItem ) {
    var draggie = new Draggabilly( gridItem );
    // bind drag events to Packery
    $grid.packery( 'bindDraggabillyEvents', draggie );
  });

//#endregion
//********** END DRAGGABLE SCRIPTS **********

标签： javascriptphpjquerypackerydraggabilly

解决方案

推荐阅读