本文介绍了如何保存坐标在db与注释，当点击div和根据div中的坐标显示？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要什么？
我使用PHP。我有一个div，当用户点击div将显示textarea基于坐标，然后用户键入一些文本bla bla bla，然后按保存它关闭并保存到数据库中的坐标和文本，并显示指针/子弹上确切的坐标，当用户鼠标悬停指针/子弹它显示文本bla bla bla。这是我需要。
我尝试
/ strong>
#ClickBox {
width：640px;
height：480px;
cursor：pointer;
background：＃2f2f2f;
top：50px;
color：#fff;
font：bold 12px Arial;
position：relative;
top：50px;
}
HTML
< div id =ClickBoxstyle =left：100px;> < / div>
jQuery / JS
$（'#ClickBox'）.click（function（e）{
var coordX = e.pageX - $（this）.offset
coordY = e.pageY - $（this）.offset（）。top;
alert（coordX +'，'+ coordY）;
}）;
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp： //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title> Box< / title>
< style type =text / css>
#ClickBox {
width：640px;
height：480px;
cursor：pointer;
background：＃2f2f2f;
top：50px;
color：#fff;
font：bold 12px Arial;
position：relative;
top：50px;
left：100px;
}
< / style>
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css>
< / head>
< body>
< div id =ClickBox>
<？php foreach（$ boxes as $ box）{？>
< a href =＃data-toggle =tooltipdata-placement =toptitle =<？php echo $ box ['note'];？>> < span style =position：absolute; left：<？php echo $ box ['position_left'];？> px; top：<？php echo $ box ['position_top'];？& background-color：#fff; width：10px; height：10px;>< / span> < / a>
<？php}？>
< / div>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script>
< script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js< / script>
< script type =text / javascript>
$（'#ClickBox'）.click（function（e）{
var coordX = e.pageX - $（this）.offset（）。left，
coordY = e.pageY - $（this）.offset（）。top;
var note = window.prompt（Please Enter Note，Your Note Will Comes Here）;
var values = {coordX： coordy：coordY，note：note};
var controller ='box';
var base_url ='<？php echo site_url（）;？>';
var myurl = base_url + controller +'/ add_note /';
$ .ajax（{
type：POST，
url：myurl，
data：values，
complete： function（data）{
$（'＃ClickBox'）。empty（）。html（data.responseText）;
}
}）;
}）;
< / script>
< / body>
< / html>
What i need?I am using PHP. I have a div when user click on div it will shows textarea based on coordinates then user type some text bla bla bla and press save it close and saves into database with coordinates and text and display pointer/bullet on exact coordinates when user mouse hover on pointer/bullet it shows that text bla bla bla. This is i need.
I try this
CSS
#ClickBox {
width:640px;
height:480px;
cursor:pointer;
background:#2f2f2f;
top:50px;
color:#fff;
font:bold 12px Arial;
position: relative;
top: 50px;
}
HTML
<div id = "ClickBox" style = "left:100px;"> </div>
jQuery/JS
$( '#ClickBox' ).click( function(e){
var coordX = e.pageX - $(this).offset().left,
coordY = e.pageY - $(this).offset().top;
alert( coordX + ' , ' + coordY );
});
here is the fiddle of this code
解决方案
here is the solution finally done it.
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Box</title>
<style type="text/css">
#ClickBox {
width:640px;
height:480px;
cursor:pointer;
background:#2f2f2f;
top:50px;
color:#fff;
font:bold 12px Arial;
position: relative;
top: 50px;
left:100px;
}
</style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div id="ClickBox">
<?php foreach($boxes as $box){ ?>
<a href="#" data-toggle="tooltip" data-placement="top" title="<?php echo $box['note']; ?>"> <span style="position:absolute;left:<?php echo $box['position_left']; ?>px;top:<?php echo $box['position_top']; ?>px;background-color:#fff;width:10px;height:10px;"></span> </a>
<?php } ?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$( '#ClickBox' ).click( function(e){
var coordX = e.pageX - $(this).offset().left,
coordY = e.pageY - $(this).offset().top;
var note = window.prompt("Please Enter Note","Your Note Will Comes Here");
var values = {coordX:coordX,coordY:coordY,note:note};
var controller = 'box';
var base_url = '<?php echo site_url(); ?>';
var myurl = base_url + controller + '/add_note/';
$.ajax({
type: "POST",
url: myurl,
data: values,
complete: function (data) {
$('#ClickBox').empty().html(data.responseText);
}
});
});
</script>
</body>
</html>
这篇关于如何保存坐标在db与注释，当点击div和根据div中的坐标显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！