个人中心
gpt4 book ai didi

Javascript 无法加载

转载 作者：行者123 更新时间：2023-11-29 21:14:59 25 4
gpt4 key购买 nike

<分区>

我做错了什么？ Javascript 不工作。有指向 jsfiddle 的链接，它运行良好:http://jsfiddle.net/onazdce2/ .

我想以某种方式将它重写到我的程序中，但 js 似乎没有加载。

HTML:

<!DOCTYPE html>

<head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Drag & Drop rubriky</title>
    <link href="style.css" rel="stylesheet" />
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
     <div id="launchPad">    
          <div class="card">apple</div> 
          <div class="card">orange</div> 
          <div class="card">banana</div> 
          <div class="card">car</div> 
          <div class="card">bus</div> 
     </div>

     <div id="dropZone">
          <div class="stack">
               <div class="stackHdr">title 1 here </div>
               <div class="stackDrop1"></div>
          </div>

          <div class="stack">
               <div class="stackHdr">title 2 here</div>
               <div class="stackDrop2"></div>
          </div>
     </div>
     <script src="script.js"></script> 
</body>
</html>

JS:

// JavaScript Document
$("#launchPad").height($(window).height() - 20);
var dropSpace = $(window).width() - $("#launchPad").width();
$("#dropZone").width(dropSpace - 10);
$("#dropZone").height($("#launchPad").height());

$(".card").draggable({
    appendTo: "body",
    cursor: "move",
    helper: 'clone',
    revert: "invalid",
});

$("#launchPad").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        $("#launchPad").append($(ui.draggable));
    }
});

$(".stackDrop1").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));

    }
});

$(".stackDrop2").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));
    }
});

CSS:

/* CSS Document */
body { 
     margin: 0;
}
#launchPad {
     float:left;
     border: 1px solid #eaeaea;
     background-color: #f5f5f5;
}
#dropZone {
     float:right;
     border: 1px solid #eaeaea;
     background-color: #ffffcc;
}
.card { 
     width: 150px; 
     padding: 5px 10px;
     margin:5px;
     border:1px solid #ccc;
     background-color: #eaeaea;
}
.stack {
     width: 180px;
     border: 1px solid #ccc;
     background-color: #f5f5f5;
     margin: 20px;
}
.stackHdr {
     background-color: #eaeaea;
     border: 1px solid #fff;
     padding: 5px 
}
.stackDrop1, .stackDrop2 {
     min-height:100px;
     padding: 15px;
}
.stack .card.ui-draggable{
     background-color:orange;
     height:150px;
}

25 4 0
文章推荐： javascript - 在 Canvas 上放大 d3js 力模拟
文章推荐： java - 由于缺少 Java 预处理器，我应该如何隔离非自由包？
文章推荐： javascript - appendChild() 从导入的模板中剥离内容
文章推荐： java - 无法在我的应用程序中使用全局变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com