Question

我正在开发一个项目，我需要在图像顶部添加多个图钉，点击按钮后，将它们的坐标存储在数据库中。

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

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

尝试使用面向对象的方法将pin保存为新对象

查看此代码的更新版本

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

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

1 个答案: