[Proto-Scripty] Re: Draggable and Droppable - Update Database (Very Close!)
I worked on a project to extend a portal to add drag/drop inside and
across columns. I just gave each column the class name 'columnClass'.
columns = $$('.columnClass');
columns.each(function(col){
Sortable.create(col.id, {
tag : 'div',
containment : columns,
constraint : false,
dropOnEmpty : true,
handle : 'handleClass',
hoverclass : 'hoverClass',
onChange : function..
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Draggable and Droppable - Update Database (Very Close!)
On Jan 25, 5:41 pm, KaR wrote:
> Hi, I actually figured it out, there were a couple of errors in my
> syntax.
>
> However, I do have one question regarding adding multiple Droppables.
> Is there any easy way to just declare all the droppables in one line
> of code?
>
> For example, I have five "DIVs" that are my droppables. They all have
> an ID, eg., 1, 2, 3, 4, 5.
>
> Right now, I have:
>
> Droppables.add(
> '1', {hoverclass: 'hoverActive', onDrop: moveItem}); $
> ('1').cleared = true;}
>
> How would I declare all of the droppables (1, 2, 3, 4, and 5)?
['1', '2', '3', '4', '5'].each(function (id) {Droppables.add(id,
{ ... })});
But note that '1' etc. are not valid IDs in HTML:
"ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".")." [http://
www.w3.org/TR/html401/types.html#h-6.2]
Colin Fine
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Draggable and Droppable - Update Database (Very Close!)
I'm not sure if your terminology is correct, but if you're actually
referring to Draggables, you might check out the 'accept' property.
http://wiki.github.com/madrobby/scriptaculous/droppables
If not, there are other solutions.
On Jan 25, 12:41 pm, KaR wrote:
> Hi, I actually figured it out, there were a couple of errors in my
> syntax.
>
> However, I do have one question regarding adding multiple Droppables.
> Is there any easy way to just declare all the droppables in one line
> of code?
>
> For example, I have five "DIVs" that are my droppables. They all have
> an ID, eg., 1, 2, 3, 4, 5.
>
> Right now, I have:
>
> Droppables.add(
> '1', {hoverclass: 'hoverActive', onDrop: moveItem}); $
> ('1').cleared = true;}
>
> How would I declare all of the droppables (1, 2, 3, 4, and 5)?
>
> On Jan 24, 12:50 pm, KaR wrote:
>
> > Hi All,
>
> > I've been working on a little bit of code that allows me to drag &
> > drop using script.aculo.us, Draggable and Droppable. I am able to
> > successfully drag and drop a div, however, the last thing I am trying
> > to do is update the database with the change. I am currently using
> > PHP and pulling the location of the div from a MySQL database.
>
> > Here's my javascript in the :
>
> >
> > window.onload = function() {
> > Droppables.add(
> > '4',
> > {
> > hoverclass: 'hoverActive',
> > onDrop: moveItem
> > }
> > );
> > // Set drop area by default non cleared.
> > $('droparea').cleared = false;}
>
> > function moveItem( draggable,droparea){
> > if (!droparea.cleared) {
> > droparea.innerHTML = '';
> > droparea.cleared = true;
> > }
> > draggable.parentNode.removeChild(draggable);
> > droparea.appendChild(draggable);
> > moveEvent(droparea,draggable);
>
> > }
>
> > function moveEvent(droparea,draggable)
> > {
> > var ajaxIndex = ajaxObjects.length;
> > ajaxObjects[ajaxIndex] = new sack();
> > ajaxObjects[ajaxIndex].requestFile = 'moveEvent.php?id=' +
> > draggable + '&day=' + droparea;
> > ajaxObjects[ajaxIndex].onCompletion = function(){ reloadCalendar
> > (); }; // Specify function that will be executed after file has been
> > found
> > ajaxObjects[ajaxIndex].runAJAX();}
>
> >
>
> > Here's the HTML/PHP for the "draggable" area:
>
> > > $event['id'].'\' style="background-color:#'.$event_type['color'].';"
> > onmouseover=\'this.style.cursor="move"; new Draggable(event'.$event
> > ['id'].', { revert:true, handle: "header'.$event['id'].'" });\'>'.
> > $event['name'].'
>
> > Here's the HTML/PHP for the "droppable" area:
>
> > > id=events>'.$day[3].'
>
> > Like I said, I can drag and drop just fine. Just, for some reason, it
> > is not updating the database. Any ideas? Is there something wrong in
> > my Javascript?
>
> > I know the PHP file "moveEvent.php" works, because I've tested it.
>
> > Many thanks!
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Draggable and Droppable - Update Database (Very Close!)
Hi, I actually figured it out, there were a couple of errors in my
syntax.
However, I do have one question regarding adding multiple Droppables.
Is there any easy way to just declare all the droppables in one line
of code?
For example, I have five "DIVs" that are my droppables. They all have
an ID, eg., 1, 2, 3, 4, 5.
Right now, I have:
Droppables.add(
'1', {hoverclass: 'hoverActive', onDrop: moveItem}); $
('1').cleared = true;}
How would I declare all of the droppables (1, 2, 3, 4, and 5)?
On Jan 24, 12:50 pm, KaR wrote:
> Hi All,
>
> I've been working on a little bit of code that allows me to drag &
> drop using script.aculo.us, Draggable and Droppable. I am able to
> successfully drag and drop a div, however, the last thing I am trying
> to do is update the database with the change. I am currently using
> PHP and pulling the location of the div from a MySQL database.
>
> Here's my javascript in the :
>
>
> window.onload = function() {
> Droppables.add(
> '4',
> {
> hoverclass: 'hoverActive',
> onDrop: moveItem
> }
> );
> // Set drop area by default non cleared.
> $('droparea').cleared = false;}
>
> function moveItem( draggable,droparea){
> if (!droparea.cleared) {
> droparea.innerHTML = '';
> droparea.cleared = true;
> }
> draggable.parentNode.removeChild(draggable);
> droparea.appendChild(draggable);
> moveEvent(droparea,draggable);
>
> }
>
> function moveEvent(droparea,draggable)
> {
> var ajaxIndex = ajaxObjects.length;
> ajaxObjects[ajaxIndex] = new sack();
> ajaxObjects[ajaxIndex].requestFile = 'moveEvent.php?id=' +
> draggable + '&day=' + droparea;
> ajaxObjects[ajaxIndex].onCompletion = function(){ reloadCalendar
> (); }; // Specify function that will be executed after file has been
> found
> ajaxObjects[ajaxIndex].runAJAX();}
>
>
>
> Here's the HTML/PHP for the "draggable" area:
>
> $event['id'].'\' style="background-color:#'.$event_type['color'].';"
> onmouseover=\'this.style.cursor="move"; new Draggable(event'.$event
> ['id'].', { revert:true, handle: "header'.$event['id'].'" });\'>'.
> $event['name'].'
>
> Here's the HTML/PHP for the "droppable" area:
>
> id=events>'.$day[3].'
>
> Like I said, I can drag and drop just fine. Just, for some reason, it
> is not updating the database. Any ideas? Is there something wrong in
> my Javascript?
>
> I know the PHP file "moveEvent.php" works, because I've tested it.
>
> Many thanks!
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Draggable and Droppable
You can try wrapping everything in one div with "position:relative". Other than that I'd need a look at your code. You can paste it here (http://www.pastie.org/) and post the link. On Dec 15, 8:10 am, Marley wrote: > I have been trying to figure out how to drag and drop images without > them moving back to a 0,0 absolute position in my div. > > First problem: I tried the: revert: "failure" but it does not work; > the draggable still snaps back. I am using the latest version 1.8.3 i > think it is. I want to drop the draggable onto the droppable and have > it stay there. > > My second problem is: I have dynamically positioned my draggables so > their top and left style attrbutes do not match their real positions. > When the draggable "reverts" after i release my mouse, the draggable > does not return to its position but rather uses the style sheet > position. Is there any way around that? --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
