Question

我有一个关于使用jQuery UI的可拖动功能的问题。我遇到以下情况：

<div id="dragThis">
    <span>
        <b id="posX"></b> 
        <b id="posY"></b>
    </span>
 </div>
<div id="dragThis">
    <span>
        <b id="posX"></b> 
        <b id="posY"></b>
    </span>
 </div>
<div id="dragThis">
    <span>
        <b id="posX"></b> 
        <b id="posY"></b>
    </span>
 </div>

将此作为JS代码：

$('#dragThis').draggable(
    {
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
        }
    });

JSFIDDLE

拖动第一个div工作正常。但它不适用于其他div。我怎样才能做到这一点？我需要一些指导如何拖动特定的div。

我不认为为每个div设置不同的id并为每个div复制可拖动函数的解决方案是一个合适的解决方案。

非常感谢任何帮助。

Answer 1

尝试使其成为类而不是id

<div class="dragThis">

id不能在文档中重复。所以你可以用class来做。你也可以这样写：

<div id="dragThis" class="drag">

并将此类引用为draggable。

JS小提琴：http://jsfiddle.net/t2y72baw/3/

如何在多个项目上应用可拖动的jQuery UI函数？

1 个答案: