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 方法，这样我就可以更新元素表中的对象，类似于我对< em>点击事件。

我该怎么做，或者我是否通过代码设计做错了什么？

Answer 1

停止功能有两个参数，我认为您可以从这些参数中获取更新所需的信息，如下所示：
http://api.jqueryui.com/draggable/#event-stop

<video>

（尚未测试过一个想法架构）

经过测试和改进的版本：

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

Answer 2

在stop活动中，您需要在updateElement上致电mainObj并传递当前元素的id，x和{{ 1}}值。您可以查询y对象以获取所需的值。

您更新的ui功能：

addElement

Fiddle Demo 使用已拖动元素的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); } }); }，span和id位置更新x。

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一样。例如。＆＃34;单击＆＃34;事件

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

3 个答案: