jQuery根据包含位置偏移位置
jQuery offset position according containment position
<script>
$(document).ready(function(e) {
$(function(){
$( "#draggable" ).draggable({
containment: "#box",
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
}
});
});
});
</script>
<style>
body{margin:0;}
#draggable{width:100px; height:100px; background:red;}
#box{width:500px; height:500px; border:solid 1px #000; margin:100px;}
</style>
<div id="box">
<div id="draggable"></div>
</div>
<input id="posX" type="text" />
<input id="posY" type="text" />
我有一个div使用jQuery可拖动和检测的位置。
我的问题是如何根据容器$('#box')
获得偏移位置,而不是根据文档?
由于可拖拽元素是附加在body上的,因此在拖拽时它根本不在#box
元素内,因此您必须减去包含元素的位置,以及在您的情况下的边界,以获得正确的值
$(function(){
var box = $('#box').offset(),
border = parseInt($('#box').css('border-width').replace(/'D/g,''), 10);
$( "#draggable" ).draggable({
containment: "#box",
drag: function(){
var offset = $(this).offset();
var xPos = offset.left - box.left - border;
var yPos = offset.top - box.top - border;
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
}
});
});
小提琴
相关文章:
- 我发现了一些只在移动设备上可见的垃圾邮件链接,我可以'找不到包含此垃圾邮件链接的脚本的位置
- Javascript中的正则表达式,用于只有数字的字符串,并且不应在除数字以外的任何位置包含任何字符
- 对jQuery UI可排序表应用包含可以防止将高行移动到最后一个位置
- CSS包含+的位置部分离开屏幕
- Javascript;HTML文件API-基于文件对象的javascript对象是否仍然包含文件'的位置
- 谷歌表单:在文档的电子邮件中包含超链接'谷歌硬盘的位置
- 如何将字符串(包含位置)转换为数组
- AngularJS UI 路由器:包含控制器脚本的位置
- 如何在 SharePoint 母版页中包含共享位置中的 js 文件
- 包含 Mongodb 中位置信息的文档
- 如果当前网址不包含位置搜索,请重定向到主页
- Fancybox 加载,但不包含任何图像,即使我很确定图像在正确的位置
- 使用 JavaScript 检查字符串是否包含字符串中任何位置的 URL
- 背景大小设置为包含的正文标签上的位置和缩放元素
- 返回包含随机位置元素的数组
- Php 包含和 js 脚本位置
- 在Laravel中包含php文件的位置以及如何使用javascript调用php文件中的特定函数
- 我应该在页面上的什么位置包含javascript
- 在Ionic中包含js库的位置
- 如何检查字符串是否在不同位置包含多个单词