czy ktoś jest mi w stanie podpowiedzieć jak wyciągnąć współrzędne civ-a względem drugiego diva ?
Chodzi o to, że mam div-a position:absolute i na niego naciągam drugiego diva, jednak mój kod zwraca współrzędne względem przeglądarki a nie diva "absolut".
Kod
<!DOCTYPE html>
<html>
<!--
Created using http://jsbin.com
Source can be edited via http://jsbin.com/eduze/edit
-->
<head>
<meta charset="utf-8" />
<title>jQuery UI: Get the position of a draggable in the droppable event drop</title>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<style type="text/css">
#draggable {
width: 120px;
height: 120px;
background: #efefef;
border: 1px solid silver;
}
#droppable {
position:absolute;
float: right;
width: 400px;
height: 200px;
background: green;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="droppable">droppable</div>
<div id="draggable">draggable</div>
<script>$('#draggable').draggable();
$('#droppable').droppable({
drop: function(event, ui) {
var treePos = $('#draggable').offset();
alert('top: ' + treePos.top + ', left: ' + treePos.left);
}
});
</body>
</html>
<html>
<!--
Created using http://jsbin.com
Source can be edited via http://jsbin.com/eduze/edit
-->
<head>
<meta charset="utf-8" />
<title>jQuery UI: Get the position of a draggable in the droppable event drop</title>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<style type="text/css">
#draggable {
width: 120px;
height: 120px;
background: #efefef;
border: 1px solid silver;
}
#droppable {
position:absolute;
float: right;
width: 400px;
height: 200px;
background: green;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="droppable">droppable</div>
<div id="draggable">draggable</div>
<script>$('#draggable').draggable();
$('#droppable').droppable({
drop: function(event, ui) {
var treePos = $('#draggable').offset();
alert('top: ' + treePos.top + ', left: ' + treePos.left);
}
});
</body>
</html>