将参数或包含对象传递给 jQuery UI 可拖动事件

Question

假设我有以下代码：

var mainObj = {
  area: $("#elementsArea"),
  elements: [],

  addElement: function (x, y) {
    var newElement = $('<div class="element"></div>');
    newElement.css("top", y);
    newElement.css("left", x);
    newElement.appendTo(this.area);
    this.elements.push( { id: this.elements.length, x: x, y: y } );
    newElement.dragabble({
      stop: function () {
        // What to do here?
      }
    });
  },

  updateElement: function ( element_id, x, y ) {
    // Find element in this.elements table table and update x, y
  },

  setup: function () {
    this.area.bind('click', this, function (e) {
      e.data.addElement( e.offsetX, e.offsetY );
    });
  }
}

$(document).ready( function () { mainObj.setup() } );

HTML和CSS无关，其他属性和函数也是。我想做的是在可拖动事件停止后以某种方式将新位置传递给 updateElement 方法，这样我就可以在 elements table 中更新对象，类似于我用 click 事件做了。

我该怎么做，还是我在代码设计上做错了什么？

Answer 1

停止函数有两个参数，我想你可以从他们那里得到你需要更新的信息，像这样：
http://api.jqueryui.com/draggable/#event-stop

newElement.dragabble({
    stop: function (event, ui) {
        var element_id = ui.helper.attr('id');// or get id as you want
        // ui.position or ui.offset try what you need
        this.updateElement(element_id, ui.position.top, ui.position.left);
    }
});

（还没有测试只是一个想法模式）

测试和改进版本：

addElement: function (x, y) {
    var self = this;// self is an alias for this
    var id = 'id_' + this.elements.length;// create unique ID
    var newElement = $('<div class="element"></div>');
    newElement.css("top", y);
    newElement.css("left", x);
    newElement.attr('id', id);//add ID for element
    newElement.appendTo(this.area);
    this.elements.push( { id: id, x: x, y: y } );
    newElement.dragabble({
       stop: function () {
          var element_id = ui.helper.attr('id');
          // ui.position or ui.offset try what you need
          self.updateElement(element_id, ui.position.top, ui.position.left);
        }
    });
},

Answer 2

在stop事件中，需要在mainObj上调用updateElement并传递当前元素的id、x和y 值。您可以查询 ui 对象以获取所需的值。

您更新的 addElement 函数：

addElement: function(x, y) {
  var newElement = $('<div class="element"></div>');
  newElement.css("top", y);
  newElement.css("left", x);
  newElement.attr('id', elemId);
  elemId++;
  newElement.appendTo(this.area);
  this.elements.push({
    id: this.elements.length,
    x: x,
    y: y
  });
  newElement.draggable({
    stop: function(event, ui) {
      //Call updateElement on mainObj.
      mainObj.updateElement(ui.helper[0].id, ui.position.left, ui.position.top);
    }
  });
}

Fiddle Demo 用 id、x 和 y 位置更新 span拖动元素。

Answer 3

解决我的问题的另一种方法是像那样冷

new_el.bind('drag', this, function ( e, ui ) {
  e.data.updateElementCoordinates( $(this).attr("element-id"), $(this).css("left"), $(this).css("top") );
});

这样我们就可以从回调中访问 mainObj 属性，就像使用 f 一样。例如。 "click" 事件。

将参数或包含对象传递给 jQuery UI 可拖动事件

Pass arguments or containing object to jQuery UI draggable events

javascript

jquery

jquery-ui

draggable

jquery-events