سوال: مشکل در رویداد mousemove [بایگانی]

alismith

چهارشنبه 25 آبان 1390, 17:38 عصر

سلام

دوستان من دارم یک کدی مینویسم که الان 2تا سوال برام پیش اومده، اول کد رو میذارم :

<html>
<head>
<title>Title of Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#posTip {
display: none;
color: red;
font-weight: bold;
font-size: 15px;
}
</style>
<script language="javascript">

$(function() {

var left,top;

$("div#box").mousemove(function(e) {

$(this).css({cursor: 'move'});

var o = {
left: e.pageX - 200, // 200 is div left
top: e.pageY - 80 // 80 is div top
};

var ot = {
left: e.pageX+10,
top: e.pageY
};

left = o.left; //2-440
top = o.top; //2-674

$("#posTip").show(2000).offset(ot).html("X="+o.left+",Y="+o.top);

return false;

}).click(function(){

$("<input/>").attr({
type: 'text',
name: 'ali',
class: 'default',
id: 1,
dataType: 'varchar',
}).css({
position: 'absolute',
top: top+"px",
left: left+"px"

}).appendTo("#box");

});

});

</script>
</head>
<body>

<div style="position: absolute; top: 80px; left: 200px; width: 600px; height: 700px; border: 1px solid #000; overflow:scroll;" id="box"></div>
<span id="posTip"></span>
<input type="button" name="btn" id="btn" value="btn"/>
</body>
</html>

1- نمیدونم چرا با حرکت mouse برروی div ، عناصر دیگه هم موقعیتشون تغییر میکنه
2- من میخام بدونم از چه روشی درسته که استفاده کنم تا حاصل کار در تمام مرورگرها و هر resolution یکسان باشه، منظورم موقعیت عناصری هست که قراره با کلیک برروی div در همونجا ساخته بشن، یعنی چطوری lموقعیت درست mouse رو نسبت به موقعیت div در صفحه رو بگیرم و به عتاصر بدم تا در همهی شرایط در یک جا نمایش داده بشن؟

لطفا یک بار کد ها رو در قالب یک فایل HTML اجرا کنید متوجه منظور من می شوید، البته باید به اینترنت متصل باشید

با تشکر

mehdi.mousavi

چهارشنبه 30 آذر 1390, 19:48 عصر

سلام.

کافیه تا خط 67 رو ببرید به خط 64 (در کد فوق).
کد رو بدین شکل تغییر بدید:

$(function () {
var left, top;
$("div#box").mousemove(function (e) {

var offset = $(this).offset();
$(this).css({ cursor: 'move' });

var o = {
left: e.clientX - offset.left,
top: e.clientY - offset.top
};

$("#posTip").show(2000).html("X=" + o.left + ",Y=" + o.top);
return false;
}).click(function (e) {
$("<input/>").attr({
type: 'text',
name: 'ali',
class: 'default',
id: 1,
dataType: 'varchar'
}).css({
position: 'absolute',
left: e.clientX - this.offsetLeft,
top: e.clientY - this.offsetTop
}).appendTo("#box");
});
});

موفق باشید.