在 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

我有以下代码，但为了提高效率，我需要使用下面的相同函数来显示每个点的结果。它目前可以很好地显示点 1/结果 1 的位置，但我一直在思考如何调整它以显示结果 2、结果 3 等，而无需每次都简单地复制/粘贴函数！

$(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();

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

希望这会有所帮助。