CODEWITHSUNDEEP
javascriptjqueryjquery-uidraggablejquery-events
ziemowit
ziemowit

Reputation: 113

Pass arguments or containing object to jQuery UI draggable events

Say I have following code:

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, and CSS are irrelevant, other attributes and functions too. What I want to do is to somehow pass new position after draggable event stops to the updateElement method, so I can update object in elements table, similar to what I did with click event.

How can I do it, or did I make something bad with code design?

Upvotes: 1

Views: 1631

Answers (3)

ziemowit
ziemowit

Reputation: 113

Another way to solve my problem was colde like that

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

That way we can acces mainObj properties from within the callback, the same way you would do that with f. eg. "click" event.

Upvotes: 0

Yass
Yass

Reputation: 2668

In the stop event, you need to call updateElement on mainObj and pass the current element's id, x and y values. You can query the ui object to get the required values.

Your updated addElement function:

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 that updates a span with the id, x and y positions of the dragged element.

Upvotes: 1

Zaragoli
Zaragoli

Reputation: 686

The stop function has two parameters, I think you can reach from them those information what you need for update, something like this:
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);
    }
});

(haven't tested just an idea schema)

tested and improved version:

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

Upvotes: 2

Related Questions