[jQuery] Re: Draggable problem
Draggable has an option called 'handle' with which you can specify the
element that use used as the drag handle for the draggable.
So, something like this...
$(#wdw).draggable({handle:$(.title, this)})
...would make the element w/id wdw draggable, but only by the sub-
element w/a classname of title.
On Aug 21, 11:41 am, Stephan step...@ldstoolbar.com wrote:
Hi there,
I am developing a web based desktop similar to eyeOS (google it to see
more).
I use jQuery to power the ajax part. Everything works great so far
except that I have a little problem with the different windows (all
div's) that I open. I made them draggable which works but they are
draggable wherever I click. Now inside those divs I have some content
like a titlebar with the name of the application and maximize,
minimize and close buttons. I want it only to be draggable if someone
clicks on the titlebar. Is this possible??
Here is a sample structure of a div window.
div id=12 class=windowcase ui-resizable ui-draggable style=left:
558px; top: 80px;
table cellspacing=0 cellpadding=0 class=window
tbodytr class=narrowrow
td class=narrowcol topleft/
td width=200 class=top/
td class=narrowcol bottomleft/
/tr
tr height=200
td class=narrowcol left/
td id=12-content class=window-contentdiv
class=windowtitle id=12-titlediv style=float: left;Process
Manager/divdiv class=windowicons id=12-iconsimg
onclick=closeWindow('12'); src=themes/default/minimizewindow.jpg/img
onclick=closeWindow('12'); src=themes/default/
closewindow.jpg//div/divnewdiv id=pro
table cellspacing=0 border=1 style=font-size: 12px; width:
100%;
tbodytrthID/ththProcess Name/ththAction/th/tr
trtd12/tdtdProcess Manager/tdtd style=padding-top: 4px;
padding-bottom: 0px;img onclick=closeWindow(12); src=themes/
default/closewindow.jpg//td/tr/tbody/table
/newdiv/td
td class=narrowcol right/
/tr
tr class=narrowrow
td class=narrowcol bottomleft/
td class=bottom/
td class=narrowcol bottomright/
/tr
/tbody/table
/div
So you see in this example I want to be able to drag the div with the
id 12 only if someone clicks on the div 12-title.
Is this possible?
[jQuery] Re: Draggable problem
On Sat, Aug 22, 2009 at 12:12 PM, ak732 ask...@gmail.com wrote:
Draggable has an option called 'handle' with which you can specify the
element that use used as the drag handle for the draggable.
So, something like this...
$(#wdw).draggable({handle:$(.title, this)})
That's right. But a simple selector will do:
$(#wdw).draggable({ handle: .title })
It already takes care of searching within the element.
- Richard
[jQuery] Re: Draggable problem
Hi , replace the javascript cod and add dragafter class in css
//javascript
$(document).ready(function(){
//Counter
counter = 1
//Make element draggable
$(#drag).draggable({
helper:'clone',
start: function(e, ui){
$(ui.helper).addClass(ui-draggable-helperMoving);
},
stop:function(ev, ui) {
$(ui.helper).addClass(ui-draggable-helperStoped);
var pos=$(ui.helper).offset();
$(#clonediv+counter).css({left:pos.left,top:pos.top});
counter++;
ui.helper.draggable({
stop:function(ev, ui) {
console.log($(ui.draggable).attr(id));
}
});
}
});
//Make element droppable
$(#frame).droppable({
drop: function(ev, ui) {
var element=$(ui.draggable).clone();
element.addClass(tempclass);
$(this).append(element);
$(.tempclass).attr(id,clonediv+counter);
$(#clonediv+counter).removeClass(tempclass);
$(#clonediv+counter).addClass(dragafter);
}
});
});
//css
.dragafter{
position:absolute;
}
I think it will fulfill the requirement of your problem
On Tue, Jul 28, 2009 at 8:56 PM, Marcos Placona marcos.plac...@gmail.comwrote:
Hi, I'm working with draggable, and basically what I'm trying to
accomplish is having one item on my screen, that can be dragged
anywhere, and uses helper:'clone', so it still sticks to its main
location and can be cloned N times.
It all looks good, but I just realized that although cloning is
possible, it always keep the same ID. Also, when I drag it from one
side to another it never stays where I dropped it, but stacks up on
the left hand side.
I've put up a quick example, so you can understand what I'm doing. The
idea is move the red spots from the left to the right, but they have
to where they were dropped and have their own ID's.
http://sandbox-placona.appspot.com/places.html
Any help is appreciated
Thanks,
Marcos Placona
http://www.placona.co.uk/blog
[jQuery] Re: Draggable problem
Hi Rupak, thank you very much for that,Although I did exactly what you
said, it still doesn't work very well.
It does create new items and gives them ids and everything, but the
items simply don't stick to the location, and simply disappear.
Here's how it is now:
http://sandbox-placona.appspot.com/demo.html
I've also changed the style as you suggested.
Can you help me a bit more with this?
Thanks
On Jul 29, 7:21 am, rupak mandal rupakn...@gmail.com wrote:
Hi , replace the javascript cod and add dragafter class in css
//javascript
$(document).ready(function(){
//Counter
counter = 1
//Make element draggable
$(#drag).draggable({
helper:'clone',
start: function(e, ui){
$(ui.helper).addClass(ui-draggable-helperMoving);
},
stop:function(ev, ui) {
$(ui.helper).addClass(ui-draggable-helperStoped);
var pos=$(ui.helper).offset();
$(#clonediv+counter).css({left:pos.left,top:pos.top});
counter++;
ui.helper.draggable({
stop:function(ev, ui) {
console.log($(ui.draggable).attr(id));
}
});
}
});
//Make element droppable
$(#frame).droppable({
drop: function(ev, ui) {
var element=$(ui.draggable).clone();
element.addClass(tempclass);
$(this).append(element);
$(.tempclass).attr(id,clonediv+counter);
$(#clonediv+counter).removeClass(tempclass);
$(#clonediv+counter).addClass(dragafter);
}
});
});
//css
.dragafter{
position:absolute;
}
I think it will fulfill the requirement of your problem
On Tue, Jul 28, 2009 at 8:56 PM, Marcos Placona
marcos.plac...@gmail.comwrote:
Hi, I'm working with draggable, and basically what I'm trying to
accomplish is having one item on my screen, that can be dragged
anywhere, and uses helper:'clone', so it still sticks to its main
location and can be cloned N times.
It all looks good, but I just realized that although cloning is
possible, it always keep the same ID. Also, when I drag it from one
side to another it never stays where I dropped it, but stacks up on
the left hand side.
I've put up a quick example, so you can understand what I'm doing. The
idea is move the red spots from the left to the right, but they have
to where they were dropped and have their own ID's.
http://sandbox-placona.appspot.com/places.html
Any help is appreciated
Thanks,
Marcos Placona
http://www.placona.co.uk/blog
[jQuery] Re: Draggable problem
OK, so I've made a few changes to it, and now it moves and stays on
the right place, but when i try to move it again, it moves only once
more, and messes up with the ID's, i think it's because the counter is
still incrementing.
Could you please give me some light here?
http://sandbox-placona.appspot.com/demo.html
I'm outputting the div name on the console, so it can be seen using
firebug
Cheers
On Jul 29, 10:19 am, Marcos Placona marcos.plac...@gmail.com wrote:
Hi Rupak, thank you very much for that,Although I did exactly what you
said, it still doesn't work very well.
It does create new items and gives them ids and everything, but the
items simply don't stick to the location, and simply disappear.
Here's how it is now:
http://sandbox-placona.appspot.com/demo.html
I've also changed the style as you suggested.
Can you help me a bit more with this?
Thanks
On Jul 29, 7:21 am, rupak mandal rupakn...@gmail.com wrote:
Hi , replace the javascript cod and add dragafter class in css
//javascript
$(document).ready(function(){
//Counter
counter = 1
//Make element draggable
$(#drag).draggable({
helper:'clone',
start: function(e, ui){
$(ui.helper).addClass(ui-draggable-helperMoving);
},
stop:function(ev, ui) {
$(ui.helper).addClass(ui-draggable-helperStoped);
var pos=$(ui.helper).offset();
$(#clonediv+counter).css({left:pos.left,top:pos.top});
counter++;
ui.helper.draggable({
stop:function(ev, ui) {
console.log($(ui.draggable).attr(id));
}
});
}
});
//Make element droppable
$(#frame).droppable({
drop: function(ev, ui) {
var element=$(ui.draggable).clone();
element.addClass(tempclass);
$(this).append(element);
$(.tempclass).attr(id,clonediv+counter);
$(#clonediv+counter).removeClass(tempclass);
$(#clonediv+counter).addClass(dragafter);
}
});
});
//css
.dragafter{
position:absolute;
}
I think it will fulfill the requirement of your problem
On Tue, Jul 28, 2009 at 8:56 PM, Marcos Placona
marcos.plac...@gmail.comwrote:
Hi, I'm working with draggable, and basically what I'm trying to
accomplish is having one item on my screen, that can be dragged
anywhere, and uses helper:'clone', so it still sticks to its main
location and can be cloned N times.
It all looks good, but I just realized that although cloning is
possible, it always keep the same ID. Also, when I drag it from one
side to another it never stays where I dropped it, but stacks up on
the left hand side.
I've put up a quick example, so you can understand what I'm doing. The
idea is move the red spots from the left to the right, but they have
to where they were dropped and have their own ID's.
http://sandbox-placona.appspot.com/places.html
Any help is appreciated
Thanks,
Marcos Placona
http://www.placona.co.uk/blog
[jQuery] Re: Draggable problem
Hi markos, i think that the style of the div is attached to its id (#drag)
that's why it will disappear after dragging. Just attach the style by class
name. or replace the html file.
On Wed, Jul 29, 2009 at 2:49 PM, Marcos Placona marcos.plac...@gmail.comwrote:
Hi Rupak, thank you very much for that,Although I did exactly what you
said, it still doesn't work very well.
It does create new items and gives them ids and everything, but the
items simply don't stick to the location, and simply disappear.
Here's how it is now:
http://sandbox-placona.appspot.com/demo.html
I've also changed the style as you suggested.
Can you help me a bit more with this?
Thanks
On Jul 29, 7:21 am, rupak mandal rupakn...@gmail.com wrote:
Hi , replace the javascript cod and add dragafter class in css
//javascript
$(document).ready(function(){
//Counter
counter = 1
//Make element draggable
$(#drag).draggable({
helper:'clone',
start: function(e, ui){
$(ui.helper).addClass(ui-draggable-helperMoving);
},
stop:function(ev, ui) {
$(ui.helper).addClass(ui-draggable-helperStoped);
var pos=$(ui.helper).offset();
$(#clonediv+counter).css({left:pos.left,top:pos.top});
counter++;
ui.helper.draggable({
stop:function(ev, ui) {
console.log($(ui.draggable).attr(id));
}
});
}
});
//Make element droppable
$(#frame).droppable({
drop: function(ev, ui) {
var element=$(ui.draggable).clone();
element.addClass(tempclass);
$(this).append(element);
$(.tempclass).attr(id,clonediv+counter);
$(#clonediv+counter).removeClass(tempclass);
$(#clonediv+counter).addClass(dragafter);
}
});
});
//css
.dragafter{
position:absolute;
}
I think it will fulfill the requirement of your problem
On Tue, Jul 28, 2009 at 8:56 PM, Marcos Placona
marcos.plac...@gmail.comwrote:
Hi, I'm working with draggable, and basically what I'm trying to
accomplish is having one item on my screen, that can be dragged
anywhere, and uses helper:'clone', so it still sticks to its main
location and can be cloned N times.
It all looks good, but I just realized that although cloning is
possible, it always keep the same ID. Also, when I drag it from one
side to another it never stays where I dropped it, but stacks up on
the left hand side.
I've put up a quick example, so you can understand what I'm doing. The
idea is move the red spots from the left to the right, but they have
to where they were dropped and have their own ID's.
http://sandbox-placona.appspot.com/places.html
Any help is appreciated
Thanks,
Marcos Placona
http://www.placona.co.uk/blog
Title: Where have I been? - Demo
[jQuery] Re: Draggable problem
Hi Rupak, I've done what you said, and although it now works better,
it still falls into being only able to drag the already dropped object
once. So if you drag it first time, and try to drag it again, it will
only happen once, and if you add more objects it messes up, as you can
see here:
http://sandbox-placona.appspot.com/demo.html
On Jul 29, 11:20 am, rupak mandal rupakn...@gmail.com wrote:
Hi markos, i think that the style of the div is attached to its id (#drag)
that's why it will disappear after dragging. Just attach the style by class
name. or replace the html file.
On Wed, Jul 29, 2009 at 2:49 PM, Marcos Placona
marcos.plac...@gmail.comwrote:
Hi Rupak, thank you very much for that,Although I did exactly what you
said, it still doesn't work very well.
It does create new items and gives them ids and everything, but the
items simply don't stick to the location, and simply disappear.
Here's how it is now:
http://sandbox-placona.appspot.com/demo.html
I've also changed the style as you suggested.
Can you help me a bit more with this?
Thanks
On Jul 29, 7:21 am, rupak mandal rupakn...@gmail.com wrote:
Hi , replace the javascript cod and add dragafter class in css
//javascript
$(document).ready(function(){
//Counter
counter = 1
//Make element draggable
$(#drag).draggable({
helper:'clone',
start: function(e, ui){
$(ui.helper).addClass(ui-draggable-helperMoving);
},
stop:function(ev, ui) {
$(ui.helper).addClass(ui-draggable-helperStoped);
var pos=$(ui.helper).offset();
$(#clonediv+counter).css({left:pos.left,top:pos.top});
counter++;
ui.helper.draggable({
stop:function(ev, ui) {
console.log($(ui.draggable).attr(id));
}
});
}
});
//Make element droppable
$(#frame).droppable({
drop: function(ev, ui) {
var element=$(ui.draggable).clone();
element.addClass(tempclass);
$(this).append(element);
$(.tempclass).attr(id,clonediv+counter);
$(#clonediv+counter).removeClass(tempclass);
$(#clonediv+counter).addClass(dragafter);
}
});
});
//css
.dragafter{
position:absolute;
}
I think it will fulfill the requirement of your problem
On Tue, Jul 28, 2009 at 8:56 PM, Marcos Placona
marcos.plac...@gmail.comwrote:
Hi, I'm working with draggable, and basically what I'm trying to
accomplish is having one item on my screen, that can be dragged
anywhere, and uses helper:'clone', so it still sticks to its main
location and can be cloned N times.
It all looks good, but I just realized that although cloning is
possible, it always keep the same ID. Also, when I drag it from one
side to another it never stays where I dropped it, but stacks up on
the left hand side.
I've put up a quick example, so you can understand what I'm doing. The
idea is move the red spots from the left to the right, but they have
to where they were dropped and have their own ID's.
http://sandbox-placona.appspot.com/places.html
Any help is appreciated
Thanks,
Marcos Placona
http://www.placona.co.uk/blog
places.html
7KViewDownload
[jQuery] Re: Draggable problem
Almost works now, except that when you add a new item, all the
existing objects have their ids changed to the newly added item's
name.
Can you spot anything weird on it?
Cheers
On Jul 29, 12:10 pm, Marcos Placona marcos.plac...@gmail.com wrote:
Hi Rupak, I've done what you said, and although it now works better,
it still falls into being only able to drag the already dropped object
once. So if you drag it first time, and try to drag it again, it will
only happen once, and if you add more objects it messes up, as you can
see here:
http://sandbox-placona.appspot.com/demo.html
On Jul 29, 11:20 am, rupak mandal rupakn...@gmail.com wrote:
Hi markos, i think that the style of the div is attached to its id (#drag)
that's why it will disappear after dragging. Just attach the style by class
name. or replace the html file.
On Wed, Jul 29, 2009 at 2:49 PM, Marcos Placona
marcos.plac...@gmail.comwrote:
Hi Rupak, thank you very much for that,Although I did exactly what you
said, it still doesn't work very well.
It does create new items and gives them ids and everything, but the
items simply don't stick to the location, and simply disappear.
Here's how it is now:
http://sandbox-placona.appspot.com/demo.html
I've also changed the style as you suggested.
Can you help me a bit more with this?
Thanks
On Jul 29, 7:21 am, rupak mandal rupakn...@gmail.com wrote:
Hi , replace the javascript cod and add dragafter class in css
//javascript
$(document).ready(function(){
//Counter
counter = 1
//Make element draggable
$(#drag).draggable({
helper:'clone',
start: function(e, ui){
$(ui.helper).addClass(ui-draggable-helperMoving);
},
stop:function(ev, ui) {
$(ui.helper).addClass(ui-draggable-helperStoped);
var pos=$(ui.helper).offset();
$(#clonediv+counter).css({left:pos.left,top:pos.top});
counter++;
ui.helper.draggable({
stop:function(ev, ui) {
console.log($(ui.draggable).attr(id));
}
});
}
});
//Make element droppable
$(#frame).droppable({
drop: function(ev, ui) {
var element=$(ui.draggable).clone();
element.addClass(tempclass);
$(this).append(element);
$(.tempclass).attr(id,clonediv+counter);
$(#clonediv+counter).removeClass(tempclass);
$(#clonediv+counter).addClass(dragafter);
}
});
});
//css
.dragafter{
position:absolute;
}
I think it will fulfill the requirement of your problem
On Tue, Jul 28, 2009 at 8:56 PM, Marcos Placona
marcos.plac...@gmail.comwrote:
Hi, I'm working with draggable, and basically what I'm trying to
accomplish is having one item on my screen, that can be dragged
anywhere, and uses helper:'clone', so it still sticks to its main
location and can be cloned N times.
It all looks good, but I just realized that although cloning is
possible, it always keep the same ID. Also, when I drag it from one
side to another it never stays where I dropped it, but stacks up on
the left hand side.
I've put up a quick example, so you can understand what I'm doing. The
idea is move the red spots from the left to the right, but they have
to where they were dropped and have their own ID's.
http://sandbox-placona.appspot.com/places.html
Any help is appreciated
Thanks,
Marcos Placona
http://www.placona.co.uk/blog
places.html
7KViewDownload
[jQuery] Re: Draggable problem
bump
On Jul 29, 12:56 pm, Marcos Placona marcos.plac...@gmail.com wrote:
Almost works now, except that when you add a new item, all the
existing objects have their ids changed to the newly added item's
name.
Can you spot anything weird on it?
Cheers
On Jul 29, 12:10 pm, Marcos Placona marcos.plac...@gmail.com wrote:
Hi Rupak, I've done what you said, and although it now works better,
it still falls into being only able to drag the already dropped object
once. So if you drag it first time, and try to drag it again, it will
only happen once, and if you add more objects it messes up, as you can
see here:
http://sandbox-placona.appspot.com/demo.html
On Jul 29, 11:20 am, rupak mandal rupakn...@gmail.com wrote:
Hi markos, i think that the style of the div is attached to its id (#drag)
that's why it will disappear after dragging. Just attach the style by
class
name. or replace the html file.
On Wed, Jul 29, 2009 at 2:49 PM, Marcos Placona
marcos.plac...@gmail.comwrote:
Hi Rupak, thank you very much for that,Although I did exactly what you
said, it still doesn't work very well.
It does create new items and gives them ids and everything, but the
items simply don't stick to the location, and simply disappear.
Here's how it is now:
http://sandbox-placona.appspot.com/demo.html
I've also changed the style as you suggested.
Can you help me a bit more with this?
Thanks
On Jul 29, 7:21 am, rupak mandal rupakn...@gmail.com wrote:
Hi , replace the javascript cod and add dragafter class in css
//javascript
$(document).ready(function(){
//Counter
counter = 1
//Make element draggable
$(#drag).draggable({
helper:'clone',
start: function(e, ui){
$(ui.helper).addClass(ui-draggable-helperMoving);
},
stop:function(ev, ui) {
$(ui.helper).addClass(ui-draggable-helperStoped);
var pos=$(ui.helper).offset();
$(#clonediv+counter).css({left:pos.left,top:pos.top});
counter++;
ui.helper.draggable({
stop:function(ev, ui) {
console.log($(ui.draggable).attr(id));
}
});
}
});
//Make element droppable
$(#frame).droppable({
drop: function(ev, ui) {
var element=$(ui.draggable).clone();
element.addClass(tempclass);
$(this).append(element);
$(.tempclass).attr(id,clonediv+counter);
$(#clonediv+counter).removeClass(tempclass);
$(#clonediv+counter).addClass(dragafter);
}
});
});
//css
.dragafter{
position:absolute;
}
I think it will fulfill the requirement of your problem
On Tue, Jul 28, 2009 at 8:56 PM, Marcos Placona
marcos.plac...@gmail.comwrote:
Hi, I'm working with draggable, and basically what I'm trying to
accomplish is having one item on my screen, that can be dragged
anywhere, and uses helper:'clone', so it still sticks to its main
location and can be cloned N times.
It all looks good, but I just realized that although cloning is
possible, it always keep the same ID. Also, when I drag it from one
side to another it never stays where I dropped it, but stacks up on
the left hand side.
I've put up a quick example, so you can understand what I'm doing.
The
idea is move the red spots from the left to the right, but they have
to where they were dropped and have their own ID's.
http://sandbox-placona.appspot.com/places.html
Any help is appreciated
Thanks,
Marcos Placona
http://www.placona.co.uk/blog
places.html
7KViewDownload
