获取多个可拖动对象的坐标

Question

我正在开发一个项目，在该项目中，我需要在图像顶部添加多个针脚，并在单击按钮时将其坐标存储在数据库中。

我能够获得单个可拖动对象的坐标。点击保存按钮后，坐标被保存。

https://jsfiddle.net/db4e66eb/

的JavaScript：

var posx; 
var posy; 
var position = function(element) { 
element = $(element); 
var top = element.position().top; 
var left = element.position().left; 
$('#dsip').text('X: ' + left + ' ' + 'Y: ' + top); 
posx=left; 
posy=top; 

    }; 
    //Saving Function 
$('#MyButton').click(function(){ 

    var position = {x: posx, y: posy }; 
    console.log(position); 

    }); 
$('#pin').draggable({ 
start: function() { 
    position('#pin'); 

}, 
stop: function() { 
    position('#pin'); 
    } 
}); 

但我怎么可以添加多个（任意数量的）可拖动对象在这里 - 我应该使用的clone（）函数来复制当前对象？

Answer 1

尝试面向对象的方法来销保存为一个新的对象

看到这个捣鼓代码的更新版本

https://jsfiddle.net/db4e66eb/1/

(function ($) { 

    var draggable = function(element, updateFunc){ 
    this.position = {x : 0, y : 0}; 
    this.element = element; 
    var _this = this; 
    $(_this.element).draggable({ 
     start: function() { 
      $("#dsip").text('X: ' + _this.element.position().left + ' ' + 'Y: ' + _this.element.position().top); 
     }, 
     stop: function() { 
      $("#dsip").text('X: ' + _this.element.position().left + ' ' + 'Y: ' + _this.element.position().top); 
      _this.position.x = _this.element.position().left; 
      _this.position.y = _this.element.position().top; 
      updateFunc(); 
      } 
    }); 
    } 
    window.draggable = draggable; 
}(window.jQuery)); 



var pins = []; 

$("#addPin").on("click", function(){ 
    var elem = $("<div/>").addClass("pin"); 
    $("#carea").append(elem); 
    pins.push(new draggable(elem, updatePins)); 

}); 
function updatePins(){ 
    $("#pinslist ul").empty(); 
    for(var p in pins){ 
    var pin = pins[p]; 
    $("<li/>").text("X: "+ pin.position.x + " Y: " + pin.position.y).appendTo($("#pinslist ul")); 
    } 
}