CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggableimagemapjquery-ui-resizable
sridharnetha
sridharnetha

Reputation: 2248

How to get coordinates of draggable and resizable elements using jQuery UI

I want to generate multiple coordinates(left, top, width, height) for responsive image map. In an admin interface allows for create, movable and resizable rectangles on a image. I am able to multiple create, movable and resizable rectangles on image and saving coordinate values into database. In an user interface populating image map by using the database saved coordinates but the rectangle positions are not showing correctly on both desktop and mobile browser view.

Here is my source code Jsfiddle. After finishing the rectangle drawing on image, please click on Run button and mouse hover to image to check the rendered map area (rectangle).

JSFiddle: https://jsfiddle.net/sridharnetha/8mryxgf2/6/

Upvotes: 0

Views: 878

Answers (1)

UfguFugullu
UfguFugullu

Reputation: 2147

I know that this post is a bit older, but here is an example I created a long time ago. Maybe it will help others with the same question.

Link to the fiddle is here.

The important snippet of jQuery to get the position and size of the element is here

$("#draggable").draggable({
    // ...
    drag: function(event, ui) {
      console.log($(event.target).width() + " x " + $(event.target).height());
      console.log(ui.position.top + " x " + ui.position.left);
    },
    stop: function(event, ui) {
      console.log($(event.target).width() + " x " + $(event.target).height());
      console.log(ui.position.top + " x " + ui.position.left);
    }
  })
  .resizable({
    // ...
    resize: function(event, ui) {
      console.log(ui.size.width + " x " + ui.size.height);
      console.log(ui.position.top + " x " + ui.position.left);
    },
    stop: function(event, ui) {
      console.log(ui.size.width + " x " + ui.size.height);
      console.log(ui.position.top + " x " + ui.position.left);
    }
  })

Further it's important to know the differences of width, innerWidth and outerWidth. See more details here.

Upvotes: 1

Related Questions