A community in which webmasters can ask for help with topics such as PHP coding , MySQL , IT jobs, web design, IT security.
Current location:homephp forumphp talk in 2009 yearUnable to get Id of draggable divs in jQuery (using jQuery UI) - page 1
User InfoPosts
Unable to get Id of draggable divs in jQuery (using jQuery UI)#1
For some reason the script below is unable to get the id of the draggable divs using attr((id(), but it works on the other static elements on the page. I am totally confused as to why this wont work and if anyone has a solution for me it would me much appreciated.

$(document).ready(function(){
//$(".draggable").draggable();
$(".draggable").draggable({ containment: (#container(, scroll: false });
$(".draggable").draggable({ stack: { group: (#container(, min: 1 } });


$("*", document.body).click(function (e) {
var offset = $(this).offset();// get the offsets of the selected div
e.stopPropagation();
var theId = $(this).attr((id();// get the id of the selceted div
$("#result").text(this.tagName + " id=" + theId + " (" + offset.left + "," + offset.top +")");
$.post("http://localhost/index.php", "id=" + theId + "&x=" + offset.left + "&y=" + offset.top); //post x,y to php (and the id of the elemnt)
});

var req = function () {
$.ajax({
url: "out.php",
cache: false,
success: function(html){
$("#stuff").empty().append(html);
var css_attr = html.split(",");
$((#1().css((left(, css_attr[0] + (px().css((top(, css_attr[1] + (px();
},
complete: function(){
req();
}
});
};
req();
});


Note: This script is dependent on the following JavaScript sources.


jquery.js
http://jqueryui.com/latest/ui/ui.core.js
http://jqueryui.com/latest/ui/ui.draggable.js
http://jqueryui.com/latest/ui/ui.droppable.js

posted date: 2009-04-11 11:15:00


Re: Unable to get Id of draggable divs in jQuery (using jQuery UI)#2
I had made out the solution of this problem. click to view my topic...

hope that hepls.

posted date: 2009-04-11 11:15:01


Re: Unable to get Id of draggable divs in jQuery (using jQuery UI)#3
Your click function works for me on a test page. Out of curiosity, if you move the (e.stopPropogation()( line to the bottom of your click function, does it behave differently?

posted date: 2009-04-11 14:19:00


Re: Unable to get Id of draggable divs in jQuery (using jQuery UI)#4
Be careful with *, you know, all means all, if you have <div><p><span><a></a></span></p></div> it means that the action is set to every single element. I(d specify classes or tags that should be affected by your function, to be always sure that you get what you want to be clicked. Try your code replacing * with the object you think it(s ID isn(t get, and see if it works..

posted date: 2009-04-11 16:16:00


Re: Unable to get Id of draggable divs in jQuery (using jQuery UI)#5
This may seem pretty obvious but are you sure that all the elements that your selecting actually have IDs. If your including everything (with the *) then it is likely that some elements don(t have IDs.

posted date: 2009-05-20 06:30:00


Re: Unable to get Id of draggable divs in jQuery (using jQuery UI)#6
Currently you(re attaching the click handler to all elements in the DOM with * (very very bad, don(t do this!), including any children in those draggables. You are correctly stopping the event from bubbling up using .stopPropagation(), but it(s likely a child of a .draggable you(ve clicked, not the draggable itself. What you want is actually listening on the .draggable element themselves, like this:$(".draggable").click(function (e) { var offset = $(this).offset(), theId = this.id; e.stopPropagation(); $("#result").text(this.tagName + " id=" + theId + " (" + offset.left + "," + offset.top +")"); $.post("http://localhost/index.php", { id: theId, x: offset.left, y: offset.top });});The other changes here are id can be accessed directly, via this.id, and passing an object to $.post() is safer for serialization, like I have above.Even the above isn(t quite there though, you likely want to send the position when you stop dragging, by changing this:$(".draggable").click(function (e) {To this:$(".draggable").bind("dragstop", function (e) {...or in newer versions of jQuery (1.4.2+):$(document.body).delegate(".draggable", "dragstop", function (e) {

posted date: 2010-12-17 03:06:00


select page: « 1 »
Copyright ©2008-2017 www.momige.com, all rights reserved.