拖放Jquery函數在站點中不起作用

Question

當我的代碼與實時站點相關聯時，我的代碼無法正常工作。 小提琴工作得很好，但是當我在網頁中包含相同的代碼時，我根本無法獲得加載/工作的功能。

<!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/

Answer 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"));
}

演示

JSFinddle

Answer 2

您是否在實時版本中正確鏈接到JQuery？ 有時，當從開發區域移動到實時系統時，引用會混亂，您可以通過查看源代碼並將鏈接輸入URL來找出引用是否有效。

Answer 3

解決方法如下：將所有javascript（從$（init）到alert（））放入所有元素之后，將其放在加載頁面的底部，主體內部。 這樣可以確保javascript知道您在說什么命名元素。

我想強調的是，這並不是編寫好的javascript的技巧。 出現問題是因為開始使用的是錯誤的JavaScript。 寫得好的頁面不依賴於代碼在頁面中的位置，實際上相反。

附言：我實際上做了以下事情：我是在谷歌搜索“拖放”之后來到這里的。 我沒有完全閱讀實際的問題。 我去了小提琴。 我出於自己的目的復制了所有代碼； 我無法使它工作。 我修復了它（只是反復試驗）； 我修復了即使在jfiddle頁面上仍然存在的錯誤； 然后我回到這里找出原始查詢是什么！

另一個錯誤是您無法拖動“ Romana I”，“ Romana II”和“ Sarah Jane”的圖像。 當代碼使數組值成為圖像元素的ID時，也許其他人可以立即發現導致該問題的原因。

拖放Jquery函數在站點中不起作用

問題描述

3 個解決方案

解決方案1
1 已采納 2013-11-06 13:35:26

解決方案2
0 2013-11-06 12:28:31

解決方案3
0 2014-01-02 16:42:19

拖放Jquery函數在站點中不起作用

問題描述

3 個解決方案

解決方案1 1 已采納 2013-11-06 13:35:26

解決方案2 0 2013-11-06 12:28:31

解決方案3 0 2014-01-02 16:42:19

解決方案1
1 已采納 2013-11-06 13:35:26

解決方案2
0 2013-11-06 12:28:31

解決方案3
0 2014-01-02 16:42:19