jquery: Variablen Rückkehr NaN
https://stackoverflow.com/questions/857703
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Nicht unter Code erschrecken lassen Sie weg . Die Frage ist wirklich einfach, nur zwei Zeilen machen Probleme:
Warum mein Code einen NaN Fehlercode erzeugt? Ich versuche, einen variablen Wert aus einer anderen so Position der Elemente zu subtrahieren richtig sein wird.
Die Variablen haben ihren Wert von jQuery-Position (), die angeblich sowieso integer sein.
Überprüfen Sie die Linien, die diese Zeilen:
// For some reason NaN error code gets generated when line below gets executed.
var posTop = Startpos.top - Stoppos.top;
var posLeft = Startpos.left - Stoppos.left;
Gesamt Code:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Drag drop 1</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var Startpos = new Array;
var Stoppos = new Array;
// Make images draggable.
$(".item").draggable({
// Elements cannot go outside #container
containment: 'parent',
// Make sure the element can only be dropped in a grid.
grid: [150,150],
// Find original position of dragged image.
start: function(event, ui) {
// Make sure picture always are on top when dragged (z-index).
$(this).css({'z-index' : '100'});
// Show start dragged position of image.
Startpos = $(this).position();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},
// Find position where image is dropped.
stop: function(event, ui) {
// Revert to default layer position when dropped (z-index).
$(this).css({'z-index' : '10'});
// Show dropped position.
Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
}
});
$(".item").droppable({
drop: function(event, ui) {
// Dragged image gets swapped with dropped on image.
var prev_position = "#" + $(this).attr('id');
// For some reason NaN error code gets generated when line below gets executed.
var posTop = Startpos.top - Stoppos.top;
var posLeft = Startpos.left - Stoppos.left;
// Below variables will work. But unfortunately they
// doesn't give the correct numbers for the purpose.
// var posTop = Startpos.top;
// var posLeft = Startpos.left;
$(prev_position).css({'top' : posTop, 'left' : posLeft});
$("div#test").text("Passed variables. Top: " + posTop + " left: " + posLeft);
}
});
});
</script>
<style>
body {
}
#container {
position:relative;
width:480px;
border:1px solid #000;
}
.item {
position:relative;
width:150px;
height:150px;
z-index:10;
}
</style>
</head>
<body>
<div id="container">
<img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" /><img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" /><img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" /><img id="productid_4" src="images/pic4.jpg" class="item" alt="" title="" /><img id="productid_5" src="images/pic5.jpg" class="item" alt="" title="" /><img id="productid_6" src="images/pic6.jpg" class="item" alt="" title="" /><img id="productid_7" src="images/pic7.jpg" class="item" alt="" title="" /><img id="productid_8" src="images/pic8.jpg" class="item" alt="" title="" /><img id="productid_9" src="images/pic9.jpg" class="item" alt="" title="" />
</div>
<div style="clear:both;"></div>
<div id="start">Waiting...</div>
<div id="stop">Waiting...</div>
<div id="hover">Waiting...</div>
<div id="stop2">Waiting...</div>
<div id="test">Waiting...</div>
</body>
</html>
Lösung
Das Problem ist, dass droppable.drop () aufgerufen wird vor draggable.stop (). Also Ihr Stoppos ist noch nicht berechnet.
Eine Möglichkeit, dies zu umgehen wäre einfach zu verfolgen, was Element gezogen wird, und berechnen Sie die Position für den in droppable.drop (). z.B. (Teilmenge des Codes), beachten Sie das „Ziehen“ Objekt.
$(document).ready(function() {
var Startpos = new Array;
var Stoppos = new Array;
var Dragging = null;
// Make images draggable.
$(".item").draggable({
// Elements cannot go outside #container
containment: 'parent',
// Make sure the element can only be dropped in a grid.
grid: [150,150],
// Find original position of dragged image.
start: function(event, ui) {
Dragging=this;
// Make sure picture always are on top when dragged (z-index).
$(this).css({'z-index' : '100'});
// Show start dragged position of image.
Startpos = $(this).position();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},
// Find position where image is dropped.
stop: function(event, ui) {
// Revert to default layer position when dropped (z-index).
$(this).css({'z-index' : '10'});
// Show dropped position.
Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
Dragging=null;
}
});
Allerdings gibt es wahrscheinlich mehrere andere legitime Möglichkeiten, um dieses.
Andere Tipps
Soweit ich weiß, Position () ist keine jQuery-Funktion.
Versuchen Sie stattdessen:
Startpos = $(this).offset();
Sie sollten dann in der Lage sein, die oberen und linken Eigenschaften zugreifen zu können.
Sind Sie sicher, dass diese die Linien, die das Problem sind? -
Sie bitte bestätigen, dass "var Postop = Startpos.top - Stoppos.top;"
gibt einen gültigen Integer / Double-Wert zu Postop? Ich war Codierung auf einem meiner Projekte der vergangenen Woche und hatte das gleiche Problem NaN, habe ich versucht, den Wert Integer zu analysieren und es hat funktioniert.
Da Sie eine mathematische Berechnung machen, versuchen, die Werte in Double / Int Parsen, bevor Sie sie subtrahieren,
Manchmal ist die Lösung ziemlich einfach ist und wir neigen dazu, über sie erschweren.
Wenn Parsing nicht funktioniert, könnte es sein, dass Sie nicht aus dem Array in dem richtigen Wert sind vorbei. Probieren Sie etwas wie Startpos [0] .Top
Hope, das hilft, viel Glück!
Entweder Startpos oder Stoppos ist nach wie vor nur ein leeres Array, wenn Sie diese Berechnung durchführen kommen.
Versuchen Sie, sie zu einem geeigneten Standard-Einstellung statt (0, 0), da dies kann es leichter machen aufzuspüren, was die Irre geht.
Was mir ein Rätsel ist, dass dies funktioniert:
ersetzt werden:
var posTop = Startpos.top - Stoppos.top;
var posLeft = Startpos.left - Stoppos.left;
Mit:
var posTop = Startpos.top;
var posLeft = Startpos.left;
Wird arbeiten, auch wenn die Zahlen nicht, was ich will. Es scheint ein simples Substraktion aus irgendeinem Grund ungültig ist.
Vielen Dank für die Hilfe Jungs:)
Gefunden das Problem.
Stoppos = $(this).position();
Sollte nicht sein:
$(".item").draggable({
stop: function(event, ui) {
Doch statt in:
$(".item").droppable({
drop: function(event, ui) {
Gesamt Code:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Drag drop 1</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var Startpos = null;
var Stoppos = null;
// Make images draggable.
$(".item").draggable({
// Elements cannot go outside #container
containment: 'parent',
// Make sure the element can only be dropped in a grid.
grid: [150,150],
// Find original position of dragged image.
start: function(event, ui) {
// Make sure picture always are on top when dragged (z-index).
$(this).css({'z-index' : '100'});
// Show start dragged position of image.
Startpos = $(this).position();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},
// Find position where image is dropped.
stop: function(event, ui) {
// Revert to default layer position when dropped (z-index).
$(this).css({'z-index' : '10'});
}
});
$(".item").droppable({
drop: function(event, ui) {
// Dragged image gets swapped with dropped on image.
var prev_position = "#" + $(this).attr('id');
Stoppos = $(this).position();
var posTop = Startpos.top - Stoppos.top;
var posLeft = Startpos.left - Stoppos.left;
$(prev_position).css({'top' : posTop, 'left' : posLeft});
// Test window
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
$("div#test").text("Passed variables. Top: " + posTop + " left: " + posLeft);
}
});
});
</script>
<style>
body {
}
#container {
position:relative;
width:480px;
border:1px solid #000;
}
.item {
position:relative;
width:150px;
height:150px;
z-index:10;
}
</style>
</head>
<body>
<div id="container">
<img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" /><img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" /><img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" /><img id="productid_4" src="images/pic4.jpg" class="item" alt="" title="" /><img id="productid_5" src="images/pic5.jpg" class="item" alt="" title="" /><img id="productid_6" src="images/pic6.jpg" class="item" alt="" title="" /><img id="productid_7" src="images/pic7.jpg" class="item" alt="" title="" /><img id="productid_8" src="images/pic8.jpg" class="item" alt="" title="" /><img id="productid_9" src="images/pic9.jpg" class="item" alt="" title="" />
</div>
<div style="clear:both;"></div>
<div id="start">Waiting...</div>
<div id="stop">Waiting...</div>
<div id="hover">Waiting...</div>
<div id="stop2">Waiting...</div>
<div id="test">Waiting...</div>
</body>
</html>
Jetzt muss ich herausfinden, wie die Platzierung der Bilder richtig zu machen, wenn sie mehr als einmal verschoben wurden. Es scheint, dass position: relative wird draggables automatisch hinzugefügt und Mühe machen in die Positionen der Berechnung: (
