0

当我的代码被整合到一个实时站点中时，我在让我的代码工作时遇到了问题。小提琴工作得很好，但是当我在网页中包含相同的代码时，我根本无法获得加载/工作的功能。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Drag and Drop Assignment</title>
<!doctype html>

<link rel="stylesheet" href="styles/style1.css"/>

<style>

.drop{
float: left;
width: 350px;
height: 400px;
border: 3px solid blue;
background-image: url("http://debsiepalmer.com/images/tardis 2.jpg");
background-repeat: no-repeat;
background-size:  cover;
}
#right{float: left;
width: 350px;
height: 400px;
border: 3px solid red;
}

</style>

<script src="draganddrop.js" ></script>
<script src="http://code.jquery.com/jquery-2.0.2.js" ></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" ></script>
<script type="text/javascript">
$ (init);

function image(id, image1) {
this.id = id;
this.image1 = image1;
}

$('#deal').click(function () {dealAll(
dealCard(randomCard()));
});

 $(function() {
$( "#draggable" ).draggable({ containment: "#left"});
});

function init() {
 $('.drop').droppable( {
 drop: handleDropEvent
  } ); 
$("img").draggable();
}

// global variables
var cardsInDeck = new Array();
var numberOfCardsInDeck = 15;
cardsInDeck[0] = "Ace";
cardsInDeck[1] = "Grace";
cardsInDeck[2] = "Susan";
cardsInDeck[3] = "Ian";
cardsInDeck[4] = "Barbara";
cardsInDeck[5] = "Brigadier";
cardsInDeck[6] = "Romana I";
cardsInDeck[7] = "K9";
cardsInDeck[8] = "Tegan";
cardsInDeck[9] = "Jamie";
cardsInDeck[10] = "Sarah Jane";
cardsInDeck[11] = "Jo";
cardsInDeck[12] = "Romana II";
cardsInDeck[13] = "Yates";
cardsInDeck[14] = "Leela";
var cardsDealt = new Array();

function dealAll(){
var z=0;
 for (z=0;z<5;z++) {
   cardsDealt[z] = new Image(z,dealCard(randomCard()));
}
}

function dealCard(i) {
if (numberOfCardsInDeck == 0) return false;
var $img = new Image();
$img.src = "images/Companions/" + cardsInDeck[i] + ".jpg";
// Here I set the ID of the object
$img.id=cardsInDeck[i];
$img.class='drag';
document.body.appendChild($img);
$('#'+$img.id).draggable();
removeCard(i);
return $img;
}
// deal randomly - works

function randomCard() {
return Math.floor(Math.random() * numberOfCardsInDeck);  
}

function removeCard(c)
{

for (j=c; j <= numberOfCardsInDeck - 2; j++)
{
    cardsInDeck[j] = cardsInDeck[j+1];
}
numberOfCardsInDeck--;
numberOfCardsInDeck--;
numberOfCardsInDeck--;
}
function handleDropEvent( event, ui ) {
alert("Fantastic!  You chose " + ui.draggable.attr("id") + " to be your companion.");
// Here I want the id of the dropped object
}
</script>
</head>

<body>
<div id="container" div style="width:750px; margin:0 auto;">
<div id="page_content" style="left: 0px; top: 0px; width: 750px" class="auto-style8">

<!--Begin Assignment 10 --->
<div id="left" class="drop">
<img id="tardis" ></img>
</div>
<input type="button" value="Get Companions" id="deal" />
<div id="content" style="left: 0px; top: 0px; width: 750px">
</div>
</div>
</div>
</body>
</html>

它应该生成 5 张图像，其中一张可以选择拖放到目标上，并生成带有被丢弃图像 id 的警报。就像我说的那样，它在小提琴中工作得很好——而且网页上的代码是相同的，所以我不明白我做错了什么。

小提琴：http: //jsfiddle.net/reaglin/FUvT8/6/

4

3 回答 3

1

我订购了一些代码......对我来说它有效

// global variables
var cardsInDeck = [],
    numberOfCardsInDeck = 5;
cardsInDeck[0] = "Ace";
cardsInDeck[1] = "Grace";
cardsInDeck[2] = "Susan";
cardsInDeck[3] = "Ian";
cardsInDeck[4] = "Barbara";
cardsInDeck[5] = "Brigadier";
cardsInDeck[6] = "Romana I";
cardsInDeck[7] = "K9";
cardsInDeck[8] = "Tegan";
cardsInDeck[9] = "Jamie";
cardsInDeck[10] = "Sarah Jane";
cardsInDeck[11] = "Jo";
cardsInDeck[12] = "Romana II";
cardsInDeck[13] = "Yates";
cardsInDeck[14] = "Leela";


//load "init" when document it's ready
$(document).on('ready',init);

function init() { 
  $( "#draggable" ).draggable({ containment: "#left"});
  $('.drop').droppable( {drop: handleDropEvent}); 
}

$('#deal').click(function () {
    dealAll();
});
$('#reset-pictures').click(function(){
    $('img.drag').remove();
    numberOfCardsInDeck = 5;
});
// deal 5 cards at once - works
function dealAll(){
    // 5 cards max, no repeat cards
    while(numberOfCardsInDeck){
        var rand = randomCard();
        dealCard(rand);
    }

}

//deal cards - works
function dealCard(i) {
    //create id, remove space id
    var id_picture = (cardsInDeck[i] +'-'+i).replace(/\s/g, '');
    //validate not exist image
    if (!!$('img#'+id_picture).length) {
        return;
     }

    var $img = $('<img/>', { src : "http://debsiepalmer.com/images/companions/" + cardsInDeck[i] + ".jpg", id : id_picture, class : 'drag', 'data-info': cardsInDeck[i]
                          })
    $('body').append($img);
    $('img.drag').draggable();
    numberOfCardsInDeck--;

}
// deal randomly - works
function randomCard() {
   return Math.floor(Math.random() * cardsInDeck.length);  
}


// this is what to do when card drops in tardis
function handleDropEvent( event, ui ) {
    alert(ui.draggable.attr("data-info"));
}

演示

JSFindle

于 2013-11-06T13:35:26.943 回答
0

您是否在实时版本中正确链接到 JQuery？有时，当从开发区域转移到实时系统时，引用会混乱，您可以通过查看源代码并在 URL 中输入链接来确定引用是否有效。

于 2013-11-06T12:28:31.910 回答
0

这就是你修复它的方法：把所有的javascript（从$（init）到alert（））放在加载页面的底部，在body内部，在所有元素之后。这可以确保 javascript 知道您正在谈论的命名元素。

我想强调的是，这不是编写好的 javascript 的技巧。出现问题是因为它一开始就是糟糕的 javascript。写得好的页面并不依赖于代码在页面中的位置，事实上恰恰相反。

后记：我确实做了以下事情：我在谷歌上搜索“拖放”后来到这里；我没有完全阅读实际问题；我去了jfiddle；我出于自己的目的复制了所有代码；我无法让它工作；我修复了它（实际上只是反复试验）；我修复了即使在 jfiddle 页面上仍然存在的错误；然后我回到这里找出原来的查询是什么！

另一个错误是您不能拖动“Romana I”、“Romana II”和“Sarah Jane”的图像。由于代码使数组值成为图像元素的 id，也许其他人可以立即发现导致该问题的原因。

于 2014-01-02T16:42:19.630 回答