2

I'm new to jquery and i'm wondering if the following thing is possible. I would like to get the name of the jquery object (in this case resizable and the attached key) to the handledragstop function. There are multiple resizableimage objects on the page, all have a unique number and i want to create a two text field with a name corresponding to the resizableimage name and add the position info to this after each drag.

$(document).ready(function(){
    $(".resize").resizable().parent().draggable({stack: "div", stop:handleDragStop});
});

function handleDragStop( event, ui) { 
    var offsetXPos = parseInt( ui.position.left );
    var offsetYPos = parseInt( ui.position.top );

    //Basically my question is if i can use the div id here after it is called from the jquery script ?
} 

<div id="resizable1" class="resize"></div>
<div id="resizable2" class="resize"></div>
<div id="resizable3" class="resize"></div>
etc.

Anyone has any idea how this can be done? I can't seem to think of anything.

Kind Regards, Zooibak

Improve this question
2
  • You should tidy you code up and remove the PHP bits. Commented Jan 3, 2012 at 10:28
  • Much better, hopefully my answer should be able to help you. Commented Jan 3, 2012 at 11:00

3 Answers 3

Reset to default
2

In the handleDragStop function this refers to the element you are dragging.

Therefore this.id will give you the ID of the element

Example Fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you Richard D. This was indeed what i'm looking for. Thank you!
1

How to get selector of jQuery object

In the place where obj is your jQuery object (specifically $('#resizableImageSomething')), you can get the selector like that:

var obj = $('#resizableImageSomething');
var selector = obj.selector; // selector is now '#resizableImageSomething'

It is that simple!

But you, however, may be experiencing some problems resulting from mixing two concepts: server-side code and client-side code. In that case, if the above solution does not help you, let me know what is the problem.

Improve this answer

4 Comments

Thank you for your reply. but i'm not quiet sure how to use this. I can't just call ui.selector from the function handledragstop. That returns undefined
@user1127585: Why exactly do you need handleDragStop() function? Sorry, the code is unreadable and I cannot correct it.
I need the handleDragStop() function to pick up the location and drop it in a text field with a slightly modified name. for example when i have the name #resizableImage1, i want to create two text fields: resizableImage1left and resizableImage1top. These text fields can than be filled with the top and left coordinates of the object #resizableImage1
i just edited my initial question to make this a bit more clear. I also included the pointer from Dutchie432. I hope the issue is a bit clearer now.
0

I think you'll want to give all of your resizeable objects the same class

<div id="resiable1" class="resize"></div>
<div id="resiable2" class="resize"></div>

Then in your JS you can use only one call

//This will apply to all object with the resize class
$(".resize").resizable().parent().draggable({stack: "div", stop:handleDragStop});
Improve this answer

1 Comment

This is a very good pointer indeed. Thank you. This is my first jquery project so i'm a bit searching for the right way to do things.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.