Got some problems after using "ui boxer"

Question

Demo: http://jsfiddle.net/8jS6d/

I have modified a little bit of it, but I want to know further about this plugin. (I knew some jQuery usages.)

1. I found out the function widget has a lot of methods, can you tell me which one is the "reserve words"? How about ui-boxer and ui-boxer-disabled ?

2. Is it possible to add a name (the text inside the div) on every div after creating? I've tried many times, but it did not work. (I don't want all divs to have the same name). For example: create first div which has innerHTML set to 'div-1', second div with innerHTML set to 'div-2' and etc. (see this example)

Is it here where I should modify?

$('#test').boxer({
  stop: function(event, ui) {
    var offset = ui.box.offset();
    ui.box.css({ border: '1px solid white', background: '#EEEEEE' });
    // here?
  }
});

Hope you can help me, I got this plugin without any documentation, so I am confused. (I forgot who is the author too)

Answer 1

Q1. I do not understand what you are asking. Do you mean "reserved words"? The ones you mention are simply class names applied to the element you connect boxer to. What is your concern with those names?

Q2. Your JSFiddle seems to be very close to what you wanted. The example below does what you seem to be asking, by using a classname for the added elements and counting those elements to get the next number.

  // Using the boxer plugin
  $('#test').boxer({
    stop: function(event, ui) {
      //var offset = ui.box.offset();
      ui.box.css({ border: '1px solid white', background: '#EEEEEE' });
      ui.box.addClass("newdiv");
      ui.box.append("div-" + $('.newdiv').length);
    }
  });

http://jsfiddle.net/8jS6d/1/

If this is not what you wanted, please clarify your problem.