مسج:المتغيرات العودة نان
https://stackoverflow.com/questions/857703
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
لا تدع أدناه رمز تخيفك.السؤال هو بسيط حقا ، سطرين فقط يبذلون المتاعب:
لماذا قانون بلدي ولدت نان رمز خطأ ؟ أنا أحاول طرح واحد قيمة المتغير من آخر ذلك الموقف من العناصر الصحيحة.
المتغيرات التي حصلت قيمتها من مسج موقف() الذي هو من المفترض أن يكون عدد صحيح على كل حال.
التحقق من خطوط هذه السطور:
// 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;
رمز كاملة:
<!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>
المحلول
المشكلة هي أن droppable.قطرة() ويسمى قبل قابل للسحب.وقف().حتى Stoppos لا تحسب بعد.
طريقة واحدة للتعامل مع هذا سيكون ببساطة تتبع ما هو البند الذي تم سحبه ، وحساب موقف هذا في droppable.قطرة().على سبيل المثال(فرعية من التعليمات البرمجية الخاصة بك) ، لاحظ "سحب" الكائن.
$(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;
}
});
ومع ذلك, ربما يكون هناك عدة طرق مشروعة حول هذا.
نصائح أخرى
بقدر ما أعرف موقف() ليست وظيفة مسج.
جرب هذا بدلا من ذلك:
Startpos = $(this).offset();
ثم يجب أن تكون قادرا على الوصول إلى أعلى وإلى اليسار خصائص.
هل أنت متأكد أن هذه هي الخطوط التي تسبب المشكلة ؟ -
هل يمكن تأكيد أن "فار posTop = Startpos.أعلى Stoppos.أعلى ؛ "
يعود صالح صحيح/ضعف قيمة posTop?كنت الترميز على واحد من بلدي المشاريع في الأسبوع الماضي وكان نفس نان المشكلة, حاولت تحليل قيمة عدد صحيح انها عملت.
لأنك صنع حسابية ، في محاولة تحليل القيم في مزدوجة/الباحث قبل طرح لهم ،
في بعض الأحيان, الحل بسيط جدا و نحن نميل إلى أكثر تعقيد.
إذا كان تحليل لا يمكن أن يكون أن كنت لا يمر في حق قيمة من المصفوفة.محاولة شيء من هذا القبيل Startpos[0].أعلى
ويساعد هذا الأمل, حظا سعيدا!
إما Startpos أو Stoppos لا تزال مجرد مجموعة فارغة عندما تأتي أداء هذا الحساب.
حاول وضع لهم مناسبة الافتراضي بدلا من ذلك (0, 0), لأن هذا قد يجعل من الأسهل لتتبع ما يجري في ضلال.
ما يحيرني هو أن هذه الأعمال:
محل:
var posTop = Startpos.top - Stoppos.top;
var posLeft = Startpos.left - Stoppos.left;
مع:
var posTop = Startpos.top;
var posLeft = Startpos.left;
سوف تعمل حتى على الرغم من أن الأرقام ليست ما أريد.يبدو البسطاء الطرح غير صحيح لسبب ما.
شكرا على المساعدة يا شباب :)
وجدت المشكلة.
Stoppos = $(this).position();
لا ينبغي أن يكون في:
$(".item").draggable({
stop: function(event, ui) {
ولكن بدلا من ذلك في:
$(".item").droppable({
drop: function(event, ui) {
رمز كاملة:
<!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>
الآن لدي فقط إلى معرفة كيفية الحصول على مواضع من الصور حق عندما تم نقله أكثر من مرة واحدة.يبدو أن موقف:قريب يضاف تلقائيا إلى draggables وجعل مشكلة في حساب المواقف :(
لا تنتمي إلى StackOverflow
