Hi, I''m trying do use drag&drop with items which are also links. I''ve seen on this mailing list, that is a recurent question for a long time : Draggable Link any solution available? <http://groups.google.com/group/rubyonrails-spinoffs/browse_thread/ thread/2f4183d0c74a393d/d196a08ed93ada94> Is there somewhere an example in using mouseUp/mouseDown event and delay to differenciate a drag from a click ? If not, can someone explain it here, and perhaps I will make a little page to explain it (BTW do you know a good place to hold that page (in the google group, on the script.aculo.us wiki ?) I''m just beggining in javascript, so any help will be very appreciated ! Arthur --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
I''ve implemented draggable links before, but it required that I extend
the Draggable class, to enable this behavior. Basically it requires
overriding the endDrag method, but doing nothing in that method. Here
is example code:
YourNameSpace.Draggable = Class.create();
Object.extend(Object.extend(YourNameSpace.Draggable.prototype,
Draggable.prototype), {
endDrag: function(event) {
}
});
Then whenever you create a new draggable, instead of doing: new
Draggable(...) you should do: new YourNameSpace.Draggable(...)
I haven''t tested this code though and no longer have a public website
that utilizes this feature, so there''s no guarantee this will work as
desired.
-justin
On 4/13/07, arthur <arthur.petry-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Hi,
>
> I''m trying do use drag&drop with items which are also links.
>
> I''ve seen on this mailing list, that is a recurent question for a
long
> time :
>
> Draggable Link any solution available?
> <http://groups.google.com/group/rubyonrails-spinoffs/browse_thread/
> thread/2f4183d0c74a393d/d196a08ed93ada94>
>
> Is there somewhere an example in using mouseUp/mouseDown event and
> delay to differenciate a drag from a click ?
>
> If not, can someone explain it here, and perhaps I will make a little
> page to explain it (BTW do you know a good place to hold that page (in
> the google group, on the script.aculo.us wiki ?)
>
> I''m just beggining in javascript, so any help will be very
> appreciated !
>
> Arthur
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Actually I just tested that code and surprise surprise, it doesn''t work. I forgot that when you''re creating the draggables you also need to attach click and mouseup listeners. Here is working code that I used on an old site, ignore the ''MrJustin'' stuff, that''s just my namespace. Change it to whatever you want. I hope the code is self-explanatory because I forgot to add comments :( http://pastie.textmate.org/53649 -justin On 4/13/07, Justin Perkins <justinperkins-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> I''ve implemented draggable links before, but it required that I extend > the Draggable class, to enable this behavior. Basically it requires > overriding the endDrag method, but doing nothing in that method. Here > is example code: > > YourNameSpace.Draggable = Class.create(); > Object.extend(Object.extend(YourNameSpace.Draggable.prototype, > Draggable.prototype), { > endDrag: function(event) { > } > }); > > Then whenever you create a new draggable, instead of doing: new > Draggable(...) you should do: new YourNameSpace.Draggable(...) > > I haven''t tested this code though and no longer have a public website > that utilizes this feature, so there''s no guarantee this will work as > desired. > > -justin > > On 4/13/07, arthur <arthur.petry-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > Hi, > > > > I''m trying do use drag&drop with items which are also links. > > > > I''ve seen on this mailing list, that is a recurent question for a long > > time : > > > > Draggable Link any solution available? > > <http://groups.google.com/group/rubyonrails-spinoffs/browse_thread/ > > thread/2f4183d0c74a393d/d196a08ed93ada94> > > > > Is there somewhere an example in using mouseUp/mouseDown event and > > delay to differenciate a drag from a click ? > > > > If not, can someone explain it here, and perhaps I will make a little > > page to explain it (BTW do you know a good place to hold that page (in > > the google group, on the script.aculo.us wiki ?) > > > > I''m just beggining in javascript, so any help will be very > > appreciated ! > > > > Arthur > > > > > > > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Arthur-
There''s an example of this at http://bgok.net. The ''feed the
chicken''
block at the bottom is draggable and clickable. The link is not
activated if the tile has been moved. If it wasn''t moved, the link is
activated.
Here''s how I did it with scriptaculous:
In the html, create the draggable element like so:
<code>
<span id="dragMe" onmouseup="if (!tileMoved)
window.open(''place-you-
are-linking-to'',
''window-name'')">Text</span>
</code>
In the header, add this javascript:
<code>
<script language="javascript" type="text/javascript"
src="scriptaculous-js-1.7.1_beta1/lib/prototype.js"></script>
<script src="scriptaculous-js-1.7.1_beta1/src/scriptaculous.js?
load=effects,dragdrop" type="text/javascript"
language="javascript"></
script>
<script language="javascript" type="text/javascript">
var tileMoved = false;
function makeDraggable(tileDiv) {
new Draggable(tileDiv, {
revert: true,
reverteffect: function(el, yOffset, xOffset) {
// A hack, using reverteffect() to do onDrop processing
tileMoved=false; // Reset tile moved because we''ve already
prevented the link
},
starteffect: function(element) {
tileMoved=true; // If we get here, the tile has been moved
element.style.zIndex = 1000; // A moving tile should be on top of
everything else
element._opacity = Element.getOpacity(element);
Draggable._dragging[element] = true;
new Effect.Opacity(element, {duration:0.2, from:element._opacity,
to:0.7});
}
});
}
Event.observe(window, ''load'', function() {
makeDraggable("dragMe");
});
</script>
</code>
I''ve tested this in IE7 and FF2 only.
Cheers,
Ken
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
arthur a écrit :> Is there somewhere an example in using mouseUp/mouseDown event and > delay to differenciate a drag from a click ?Hrm... You mean the delay option works, but when you do release the drag, it ends up clicking? -- Christophe Porteneuve a.k.a. TDD "[They] did not know it was impossible, so they did it." --Mark Twain Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
(this is my second attempt to answer, I don''t know why, google skipped the first) First of all, thanks to all for the answers, I was not expected that, so quickly ! On 14 avr, 14:12, Christophe Porteneuve <t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org> wrote:> > Hrm... You mean the delay option works, but when you do release the > drag, it ends up clicking? >In fact, at first I didn''t even try the delay option, because it was still not documented on wiki.script.aculo.us. I just tried, and it works just like it should, thanks. If I do nothing more, when I release the drag, it ends up clicking, yes. I just want to not end up clicking in case of a drag. Ken''s answer just implemented the solution I quote from in my first mail. Thanks a lot. I think it could be simplier with using the "change" function instead of the "startEffect" function to set tileMove to true if we want to keep startEffect defaults : var tileMoved = false; function makeDraggable(tileDiv) { new Draggable(tileDiv, { revert: true, reverteffect: function(el, yOffset, xOffset) { // A hack, using reverteffect() to do onDrop processing tileMoved=false; // Reset tile moved because we''ve already prevented the link }, change: function(element) {tileMoved=true;} // my modification }); } But it''s still a hack, like you said ! Justin''s solution seems to me dangerous : there is nothing left in the endrop function, so we lost stopScrolling(), all the stuff in finishDrag(event, true), and the event is not stop : from dragdrop.js : endDrag: function(event) { if(!this.dragging) return; this.stopScrolling(); this.finishDrag(event, true); Event.stop(event); }, Could this solution raise problems ? Thanks a lot to all ! Arthur --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
The delay option will help, but as you noticed, it won''t solve all of
your problems. Delay was set up to not fire the drag if the user was
simply clicking. It won''t work the other way ''round.
The trouble here is that Drag uses onmouseup, and the link uses
onclick, an event the Draggable doesn''t observe.
An easy way to trap the onclick is (pseudo code):
function onEndDrag () { // make it an observer, pass it as an
option,.... whatever.
this.element._lastDrag = time();
}
function checkLinkDrag (evt) { // have this function observe the
onclick event of the link
if (!this._lastDrag) {return;}
if (time() - this._lastDrag < 200) { // Play with this a little bit
Event.stop(evt);
}
}
An even better way is to use handles for dragging (so you''re not
dragging links). Than you won''t have to deal with unwanted behavior.
TAG
On Apr 17, 2007, at 3:01 AM, arthur wrote:
>
> (this is my second attempt to answer, I don''t know why, google
skipped
> the first)
>
> First of all, thanks to all for the answers, I was not expected that,
> so quickly !
>
> On 14 avr, 14:12, Christophe Porteneuve
<t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org> wrote:
>>
>> Hrm... You mean the delay option works, but when you do release the
>> drag, it ends up clicking?
>>
>
> In fact, at first I didn''t even try the delay option, because it
was
> still not documented on wiki.script.aculo.us.
> I just tried, and it works just like it should, thanks.
>
> If I do nothing more, when I release the drag, it ends up clicking,
> yes.
> I just want to not end up clicking in case of a drag.
>
> Ken''s answer just implemented the solution I quote from in my
first
> mail. Thanks a lot.
> I think it could be simplier with using the "change" function
instead
> of the "startEffect" function to set tileMove to true if we want
to
> keep startEffect defaults :
>
> var tileMoved = false;
>
> function makeDraggable(tileDiv) {
> new Draggable(tileDiv, {
> revert: true,
> reverteffect: function(el, yOffset, xOffset) {
> // A hack, using reverteffect() to do onDrop
> processing
> tileMoved=false; // Reset tile moved because
> we''ve already prevented the link
> },
> change: function(element) {tileMoved=true;} // my
> modification
> });
> }
> But it''s still a hack, like you said !
>
> Justin''s solution seems to me dangerous : there is nothing left in
the
> endrop function, so we lost stopScrolling(), all the stuff in
> finishDrag(event, true), and the event is not stop :
> from dragdrop.js :
> endDrag: function(event) {
> if(!this.dragging) return;
> this.stopScrolling();
> this.finishDrag(event, true);
> Event.stop(event);
> },
>
> Could this solution raise problems ?
>
> Thanks a lot to all !
>
> Arthur
>
>
> >
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
My solution worked fine for me. I used it on a page with a bunch of links and inside each link was a thumbnail image. I was pleased with the results, but did not research if there was *better* ways to achieve the goal. If you look at the complete code example I gave you, I''ve implemented a click event on each draggable item, and this method calls the stopScrolling and finishDrag events as needed for clean-up. -justin On 4/17/07, arthur <arthur.petry-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > (this is my second attempt to answer, I don''t know why, google skipped > the first) > > First of all, thanks to all for the answers, I was not expected that, > so quickly ! > > On 14 avr, 14:12, Christophe Porteneuve <t...-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org> wrote: > > > > Hrm... You mean the delay option works, but when you do release the > > drag, it ends up clicking? > > > > In fact, at first I didn''t even try the delay option, because it was > still not documented on wiki.script.aculo.us. > I just tried, and it works just like it should, thanks. > > If I do nothing more, when I release the drag, it ends up clicking, > yes. > I just want to not end up clicking in case of a drag. > > Ken''s answer just implemented the solution I quote from in my first > mail. Thanks a lot. > I think it could be simplier with using the "change" function instead > of the "startEffect" function to set tileMove to true if we want to > keep startEffect defaults : > > var tileMoved = false; > > function makeDraggable(tileDiv) { > new Draggable(tileDiv, { > revert: true, > reverteffect: function(el, yOffset, xOffset) { > // A hack, using reverteffect() to do onDrop > processing > tileMoved=false; // Reset tile moved because > we''ve already prevented the link > }, > change: function(element) {tileMoved=true;} // my > modification > }); > } > But it''s still a hack, like you said ! > > Justin''s solution seems to me dangerous : there is nothing left in the > endrop function, so we lost stopScrolling(), all the stuff in > finishDrag(event, true), and the event is not stop : > from dragdrop.js : > endDrag: function(event) { > if(!this.dragging) return; > this.stopScrolling(); > this.finishDrag(event, true); > Event.stop(event); > }, > > Could this solution raise problems ? > > Thanks a lot to all ! > > Arthur > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
On 17 avr, 17:12, "Justin Perkins" <justinperk...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> My solution worked fine for me. I used it on a page with a bunch of > links and inside each link was a thumbnail image. I was pleased with > the results, but did not research if there was *better* ways to > achieve the goal. > > If you look at the complete code example I gave you, I''ve implemented > a click event on each draggable item, and this method calls the > stopScrolling and finishDrag events as needed for clean-up. >Ok, as you see, I hadn''t tested very well your solution, at first, sorry. I haved miss the itemClicked method, which do what the endDrag method was doing ! So your solution seems fine, thanks ! (BTW, sorry with the search for the *best* solution ever :-), but as I''m beginning in JS, so I tried to compare the different answers). --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
> So your solution seems fine, thanks ! > (BTW, sorry with the search for the *best* solution ever :-), but as > I''m beginning in JS, so I tried to compare the different answers).No offense taken :) I was trying to say that when I needed a solution for that problem, I didn''t research it, I just tried to extend scriptaculous to make it work like I wanted it to. So I''m completely aware that there are better solutions out there :) -justin --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---