在jQuery Draggable中多次重用函数

Question

我正在使用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，但它上面的函数我想要每次重用（然后能够获取每个值和事后与他们做事。）

Answer 1

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

假设您有以下内容......

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


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

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

希望这有助于。