獲取多個可拖動對象的座標

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")); 
    } 
}