How to draw divs to a specific position using jQuery UI 's selectable?

Question

I want to draw divs to a specific position using jQuery UI's selectable,

I've tried it and I thought it's almost figured out: http://jsfiddle.net/62LJG/

The steps I've thought is:

Fetch Selectable's helper's left and top.
Fetch Selectable's helper's width and height.
Append a div to my target and I can use these left, top, width, height I've got to CSS this div.

Now my problem is I can't get the width and height from this widget.

I thought all the jQuery UI are similar so I tried this:

$('#tar').selectable({
  stop: function(event, ui) {
    console.log(ui.size.width + ',' + ui.size.height);
  }
});

but this part ui.size doesn't work.

But I can use ui.size in jQuery resizable or draggable to get width and height.

How can I get width and height from jQuery selectable's helper(dotted line) to achieve my goal?

score 0 · Answer 1 · answered Feb 28 '14 at 17:51

0

The ui object seems to be empty, use this:

$(function() {
    $('#tar').selectable({
      stop: function(event, ui) {
        console.log($(this).width() + ',' + $(this).height());
      }
    });
});

If you have padding/margin in your element use $(this).outerWidth() and $(this).outerHeight().

answered Feb 28 '14 at 17:51

Wilmer

448
2
4

I used this just now. but I got the width and height from #tar (300, 300) – Baozi Wu Feb 28 '14 at 17:58
I want to fetch width and height from the selectable's helper(dotted line) anyway, thanks a lot ;) – Baozi Wu Feb 28 '14 at 18:00
you mean to draw a div inside? – Wilmer Feb 28 '14 at 18:08
Yes, I want to draw a div inside of #tar. – Baozi Wu Mar 01 '14 at 03:21

score 0 · Accepted Answer · edited May 23 '17 at 10:31

0

Finally I figure it out.

event.page - position() will get the relative value.

demo: http://jsfiddle.net/62LJG/1/

reference: Using jQuery how to get click coordinates on the target element

edited May 23 '17 at 10:31

Community

1
1

answered Mar 01 '14 at 08:44

Baozi Wu

53
1
5

How to draw divs to a specific position using jQuery UI 's selectable?

2 Answers2