0

我正在使用 jQuery UI Draggable 并且我有多个用户可以拖动的点，每个点的顶部/左侧位置显示在下面的相应结果 div 中（这将显示每个点的原始起始位置，如果它从不移动，或者每个点的最终位置（如果移动）。HTML如下

<div id="container">
<div id="point1"></div>
<div id="point2"></div>
<div id="point3"></div> etc
</div>

<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div> etc

我有以下代码，但为了提高效率，我需要使用下面的相同函数来显示每个点的结果。它目前可以很好地显示 point1/result1 的位置，但是对于如何调整它以显示 result2、result3 等而不是每次都简单地复制/粘贴函数，我已经大脑冻结了！

$(document).ready(function() {

var coord = function(element) {
element = $(element);
var top = element.position().top;
var left = element.position().left;
$('#result1').text('White box: Left: ' + left + 'px ' + 'Top: ' + top + 'px');
}


$('#point1').draggable({cursor: "move", cursorAt: { top: 5, left: 5 }, containment: "#container", scroll: false,
create: function() {
    coord('#point1');
},
start: function() {
    coord('#point1');
},
stop: function() {
    coord('#point1');
}
});

我知道我可能可以将子选择器用于容器内的所有点而不是#point1 div，但它上面的函数我想每次都重用（然后能够获取每个值并使用他们之后）。

4

1 回答 1

1

我是 jQuery 的新手，但我一直在玩你最近在做什么。我通过为 DIV 分配一个类来解决这个问题。一个用于可拖动元素，一个用于可放置元素。然后，您可以简单地为类声明事件。

假设你有以下...

<div id="point1" class="point"></div>
...
<div id="result1" class="result"></div>


$( ".point" ).draggable();
$( ".result" ).droppable();

然后，您可以为每种行为相应地分配通用函数。

希望这会有所帮助。

于 2013-01-16T14:43:23.733 回答