拖放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