我试图使用jQuery UI收集多个可拖动元素的位置。
此刻我可以获得一个元素的位置,但当我移动另一个元素时,两个位置都会改变。
请有人协助我获取多个可拖动物品的单独位置。
http://codepen.io/anon/pen/nLGIl
HTML
<div class="dragThis" id="box-1"style="top: 100px; left: 50px;" >
<h2>Test 1</h2>
<p>This is a test</p>
<ul>
<li class="posX"></li>
<li class="posY"></li>
</ul>
</div>
<div class="dragThis" id="box-1" style="top: 50px; left: 100px;" >
<h2>Test 2</h2>
<p>This is a test</p>
<ul>
<li class="posX"></li>
<li class="posY"></li>
</ul>
</div>
CSS
.dragThis {
min-width: 50px;
max-width: 300px;
min-height: 50px;
max-height: 400px;
overflow: auto;
padding: 10px;
background: #efefef;
border: 3px solid #ccc;
border-radius: 10px;
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
.dragThis h2 {
font-size: 20px;
margin: 0;
padding: 0;
}
.dragThis ul {
list-style: none;
margin: 0;
padding: 0;
}
.top {z-index: 2; position: relative}
.bottom {z-index: 1; position: relative}
JS
$(document).ready(function() {
var a = 3;
$('.dragThis').draggable(
{
start: function(){
$(this).css("z-index", a++);
},
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('.posX').text('x: ' + xPos);
$('.posY').text('y: ' + yPos);
}
});
$('.dragThis').click(function(){
$(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", a++);
});
});
答案 0 :(得分:1)
首先,Double ID不好.. box-1和box-2更好:
您将所有元素与类'.posX'等匹配。 试试这个:
$(document).ready(function() {
var a = 3;
$('.dragThis').draggable(
{
start: function(){
$(this).css("z-index", a++);
},
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$(this).find('.posX').text('x: ' + xPos);
$(this).find('.posY').text('y: ' + yPos);
}
});
$('.dragThis').click(function(){
$(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", a++);
});
});
答案 1 :(得分:0)
通过执行此操作$('.posX')
,当您只需要活动框中的那些元素时,您已选择此类的所有元素,因此代码将如下所示:
$(this).find('.posX').text('x: ' + xPos);
$(this).find('.posY').text('y: ' + yPos);
答案 2 :(得分:0)
$('.posX', this).text('x: ' + xPos);
$('.posY', this).text('y: ' + yPos);
而不是
$('.posX').text('x: ' + xPos);
$('.posY').text('y: ' + yPos);