[js] drag and drop

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

[js] drag and drop

bubblebenj
Hi,

Is there any implementation of a drag and drop lib wandering in haxe libs ?
It's not that difficult to implement especially with jquery but, hey, I feel lazy !

Ben

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: [js] drag and drop

Tarwin Stroh-Spijer
This probably isn't something that you'd include in haxe itself - and is specific to the target. So yeah, implementing in JQuery is probably the best. What you might want to look for is externs for the JQueryUI library though.


Tarwin Stroh-Spijer
_______________________

Touch My Pixel
http://www.touchmypixel.com/
phone: +61 3 8060 5321
_______________________


On Thu, Oct 20, 2011 at 9:37 PM, benjamin Dubois <[hidden email]> wrote:
Hi,

Is there any implementation of a drag and drop lib wandering in haxe libs ?
It's not that difficult to implement especially with jquery but, hey, I feel lazy !

Ben

--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: [js] drag and drop

jlm@justinfront.net
In reply to this post by bubblebenj
Hope the drag from DisplayDiv in Divtastic worked out (private pm'd as could not access my email normally earlier and post to list), just remembered I ended up solving the getting position issue needed for drag also in another way as well, hence also getGlobalXY in DisplayDiv that traverses the 'display list'.  In some code not in the repository I was using it for rotating another clip.
// partial snipit
    private function startRotation( e: Event )
    {
       
        var pos = _bg.getGlobalXY();
        offSetX = pos.first() + _bg.width/2;
        offSetY = pos.last() + _bg.height/2;
        _bg.getInstance().onmousemove = rotateArrow;
       
    }
    private function rotateArrow( e: Event )
    {
        var ang = Math.atan2( e.clientY- offSetY, e.clientX- offSetX )*180/Math.PI + 90;
        _arrowHead.rotation = ang;
        if( ang< 0)
        {
            ang = 360 + ang;
        }
        _rotationInfo.updateText( Std.string( Math.round( ang ) ) );
        rotation = ang;
       
    }
When I get time I will try to refactor a rotation tool example and add it to Divtastic ( for drag ones see Bezier experiments ) Also have to look at fixing drag for IE maybe using globalXY.  Strange when you find you have solved more or less the same problem differently in two places within the same project!


Reply | Threaded
Open this post in threaded view
|

Re: [js] drag and drop

postite
is my ( very personnal ) but functionnal version of jquery ui Draggable extern  for use with haxe native  js.Jquery :

hope this could be useful 


package jquery.ui ;
import js.JQuery;



extern enum DraggableMethods
{
destroy;
enable;
disable;
}
extern enum DraggableEvent{
create;
start;
drag;
stop;
}


typedef DraggableOptions =
{
var addClasses:Bool;// default:true,
var appendTo:String;// "parent", selector
var axis:String; //x,y Default:false,
var connectToSortable:String;// false,selector
var containment:Dynamic;// Element, String, Array Default:false
var cursor:String;// "auto",
var cursorAt:Bool; //false,
var grid:Bool;// false,
var handle:Bool;// false,
var helper:String;// "original",
var iframeFix:Bool;// false,
var opacity:Float;// false,
var refreshPositions:Bool;// false,
var revert:Bool;// false,
var revertDuration:Float;// 500,
var scope:String;// "default",
var scroll:Bool;// true,
var scrollSensitivity:Float;// 20,
var scrollSpeed:Float;// 20,
var snap:Bool;// false,
var snapMode:String;// "both",
var snapTolerance:Float;// 20,
var stack:Bool;// false,
var zIndex:Bool;// false
}


#if JQUERY_NOCONFLICT
@:native("jQuery")
#else
@:native("$")
#end


extern class Draggable extends JQuery
{
public static function __init__():Void {
        untyped __js__("var Draggable = window.jQuery");
untyped __js__('DraggableMethods = { destroy : "destroy", enable : "enable", disable : "disable" };');
    untyped __js__('DraggableEvent={create:"create",start:"dragstart",drag:"drag",stop:"dragstop"}');
}
@:overload(function(methode:DraggableMethods,?opt:Dynamic):Draggable{})
public function draggable(?option:DraggableOptions):Draggable; 
}

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: [js] drag and drop

bubblebenj
Actually, I have move on something else until I feel not lazy (using basic click event to perform my tasks) 
since the code I stole from divtastic cannot be used as is.

David, using jQueryUi plugin was my first idea. How do you include the js code to the project ? I've never used a non-haxe-lib extern library.

Thanks guys

Ben

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: [js] drag and drop

postite
hi ben ! 
David, using jQueryUi plugin was my first idea. How do you include the js code to the project ? I've never used a non-haxe-lib extern library.

i'm not sure how to understand your question ....

in your haxe class 

import js.JQuery
import jquery.ui.Draggable;

function test();
var drag:Draggable= new Draggable("#selector");
var opt:DragabbleOptions= cast {};
opt.grid=true ;/// for example
drag.draggable(opt);


of course you have to include your jqueryui js file inside your html
but after your jquery.js ( do not use macro embedding )
and before your haxegenerated js. 

is that so ?
cheers
postite



--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: [js] drag and drop

bubblebenj
It was the html part that I missed.
However how would I put jqueryUi between jquery.js and my haxegenerated.js since both are in the same file since jquery is generated from haxe ?
I'll try to put it before or after but I'm expecting a hence/egg dilemna. 

Ben

On Fri, Oct 21, 2011 at 4:37 PM, david <[hidden email]> wrote:
hi ben ! 
David, using jQueryUi plugin was my first idea. How do you include the js code to the project ? I've never used a non-haxe-lib extern library.

i'm not sure how to understand your question ....

in your haxe class 

import js.JQuery
import jquery.ui.Draggable;

function test();
var drag:Draggable= new Draggable("#selector");
var opt:DragabbleOptions= cast {};
opt.grid=true ;/// for example
drag.draggable(opt);


of course you have to include your jqueryui js file inside your html
but after your jquery.js ( do not use macro embedding )
and before your haxegenerated js. 

is that so ?
cheers
postite



--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: [js] drag and drop

postite
hello :)

However how would I put jqueryUi between jquery.js and my haxegenerated.js since both are in the same file since jquery is generated from haxe ?

that's the trick ...
you have to put -D embedNoJs ( not sure about capitalization)
in you'r build.hxml file

then embed on your own jquery.js in your html ... 

ps i have others ui extern if you are iintersted ....

a plus !
postite

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: [js] drag and drop

clemos
In reply to this post by bubblebenj
Hi Benjamin,

In this situation, you can ask haXe not to embed JQuery by using this flag :
-D noEmbedJS
This way, you're free to <link> first jquery.js, then extensions, and
finally your haXe js.

IMHO the way haXe embeds JQuery by default is made to make it work
quickly, but in the long run, you almost always need to not embed it.
I've also discovered that such embedded scripts are pasted in the end
of the haXe generated script, which makes it impossible, for example,
to extend these externs.
I'll probably create a ticket for this improvement as soon as I have a
simple real-life case.

Regards,
Clément

On Fri, Oct 21, 2011 at 5:21 PM, benjamin Dubois <[hidden email]> wrote:

> It was the html part that I missed.
> However how would I put jqueryUi between jquery.js and my haxegenerated.js
> since both are in the same file since jquery is generated from haxe ?
> I'll try to put it before or after but I'm expecting a hence/egg dilemna.
> Ben
>
> On Fri, Oct 21, 2011 at 4:37 PM, david <[hidden email]> wrote:
>>
>> hi ben !
>>
>> David, using jQueryUi plugin was my first idea. How do you include the js
>> code to the project ? I've never used a non-haxe-lib extern library.
>>
>> i'm not sure how to understand your question ....
>> in your haxe class
>> import js.JQuery
>> import jquery.ui.Draggable;
>> function test();
>> var drag:Draggable= new Draggable("#selector");
>> var opt:DragabbleOptions= cast {};
>> opt.grid=true ;/// for example
>> drag.draggable(opt);
>>
>> of course you have to include your jqueryui js file inside your html
>> but after your jquery.js ( do not use macro embedding )
>> and before your haxegenerated js.
>> is that so ?
>> cheers
>> postite
>>
>>
>> --
>> haXe - an open source web programming language
>> http://haxe.org
>
>
> --
> haXe - an open source web programming language
> http://haxe.org
>

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: [js] drag and drop

bubblebenj
Ok I see, I try it.

Just a simple extra question. How do I make the difference between the haxe generated js and extern.
I mean jquery is part of the API, there may be some others libs.
Simply wait for an execution failure that tells me the lib is missing ?

Ben

On Fri, Oct 21, 2011 at 5:32 PM, clemos <[hidden email]> wrote:
Hi Benjamin,

In this situation, you can ask haXe not to embed JQuery by using this flag :
-D noEmbedJS
This way, you're free to <link> first jquery.js, then extensions, and
finally your haXe js.

IMHO the way haXe embeds JQuery by default is made to make it work
quickly, but in the long run, you almost always need to not embed it.
I've also discovered that such embedded scripts are pasted in the end
of the haXe generated script, which makes it impossible, for example,
to extend these externs.
I'll probably create a ticket for this improvement as soon as I have a
simple real-life case.

Regards,
Clément

On Fri, Oct 21, 2011 at 5:21 PM, benjamin Dubois <[hidden email]> wrote:
> It was the html part that I missed.
> However how would I put jqueryUi between jquery.js and my haxegenerated.js
> since both are in the same file since jquery is generated from haxe ?
> I'll try to put it before or after but I'm expecting a hence/egg dilemna.
> Ben
>
> On Fri, Oct 21, 2011 at 4:37 PM, david <[hidden email]> wrote:
>>
>> hi ben !
>>
>> David, using jQueryUi plugin was my first idea. How do you include the js
>> code to the project ? I've never used a non-haxe-lib extern library.
>>
>> i'm not sure how to understand your question ....
>> in your haxe class
>> import js.JQuery
>> import jquery.ui.Draggable;
>> function test();
>> var drag:Draggable= new Draggable("#selector");
>> var opt:DragabbleOptions= cast {};
>> opt.grid=true ;/// for example
>> drag.draggable(opt);
>>
>> of course you have to include your jqueryui js file inside your html
>> but after your jquery.js ( do not use macro embedding )
>> and before your haxegenerated js.
>> is that so ?
>> cheers
>> postite
>>
>>
>> --
>> haXe - an open source web programming language
>> http://haxe.org
>
>
> --
> haXe - an open source web programming language
> http://haxe.org
>

--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: [js] drag and drop

clemos
Hi benjamin,

AFAIK there are only two actual externs in the haXe API: JQuery and SWFObject.
They are both affected by the noEmbedJS flag and their "sources" are
also both present in the std/js directory as .js files.

So yes, it requires some extra attention from the developer to make
sure the html page is actually linking them, and they are loaded in
the right order.
And yes, you will get a more or less obscure runtime failure if your
js environment doesn't contain the appropriate objects/libraries.
This being said, it's not too hard to write a proper detection code
and trace() a clearer message if the libraries are not loaded.

Something I have also been thinking about is using something like
require.js to have these libs loaded at runtime without extra link
tags.
It could probably be done with metadata (@require("js/jquery.js")),
macros and/or a custom js generator.

Regards,
Clément

On Fri, Oct 21, 2011 at 5:39 PM, benjamin Dubois <[hidden email]> wrote:

> Ok I see, I try it.
> Just a simple extra question. How do I make the difference between the haxe
> generated js and extern.
> I mean jquery is part of the API, there may be some others libs.
> Simply wait for an execution failure that tells me the lib is missing ?
> Ben
> On Fri, Oct 21, 2011 at 5:32 PM, clemos <[hidden email]> wrote:
>>
>> Hi Benjamin,
>>
>> In this situation, you can ask haXe not to embed JQuery by using this flag
>> :
>> -D noEmbedJS
>> This way, you're free to <link> first jquery.js, then extensions, and
>> finally your haXe js.
>>
>> IMHO the way haXe embeds JQuery by default is made to make it work
>> quickly, but in the long run, you almost always need to not embed it.
>> I've also discovered that such embedded scripts are pasted in the end
>> of the haXe generated script, which makes it impossible, for example,
>> to extend these externs.
>> I'll probably create a ticket for this improvement as soon as I have a
>> simple real-life case.
>>
>> Regards,
>> Clément
>>
>> On Fri, Oct 21, 2011 at 5:21 PM, benjamin Dubois <[hidden email]>
>> wrote:
>> > It was the html part that I missed.
>> > However how would I put jqueryUi between jquery.js and my
>> > haxegenerated.js
>> > since both are in the same file since jquery is generated from haxe ?
>> > I'll try to put it before or after but I'm expecting a hence/egg
>> > dilemna.
>> > Ben
>> >
>> > On Fri, Oct 21, 2011 at 4:37 PM, david <[hidden email]> wrote:
>> >>
>> >> hi ben !
>> >>
>> >> David, using jQueryUi plugin was my first idea. How do you include the
>> >> js
>> >> code to the project ? I've never used a non-haxe-lib extern library.
>> >>
>> >> i'm not sure how to understand your question ....
>> >> in your haxe class
>> >> import js.JQuery
>> >> import jquery.ui.Draggable;
>> >> function test();
>> >> var drag:Draggable= new Draggable("#selector");
>> >> var opt:DragabbleOptions= cast {};
>> >> opt.grid=true ;/// for example
>> >> drag.draggable(opt);
>> >>
>> >> of course you have to include your jqueryui js file inside your html
>> >> but after your jquery.js ( do not use macro embedding )
>> >> and before your haxegenerated js.
>> >> is that so ?
>> >> cheers
>> >> postite
>> >>
>> >>
>> >> --
>> >> haXe - an open source web programming language
>> >> http://haxe.org
>> >
>> >
>> > --
>> > haXe - an open source web programming language
>> > http://haxe.org
>> >
>>
>> --
>> haXe - an open source web programming language
>> http://haxe.org
>
>
> --
> haXe - an open source web programming language
> http://haxe.org
>

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: [js] drag and drop

bubblebenj
OK nothing that could become a problem with only few libs.

Thx

Ben

On Fri, Oct 21, 2011 at 6:05 PM, clemos <[hidden email]> wrote:
Hi benjamin,

AFAIK there are only two actual externs in the haXe API: JQuery and SWFObject.
They are both affected by the noEmbedJS flag and their "sources" are
also both present in the std/js directory as .js files.

So yes, it requires some extra attention from the developer to make
sure the html page is actually linking them, and they are loaded in
the right order.
And yes, you will get a more or less obscure runtime failure if your
js environment doesn't contain the appropriate objects/libraries.
This being said, it's not too hard to write a proper detection code
and trace() a clearer message if the libraries are not loaded.

Something I have also been thinking about is using something like
require.js to have these libs loaded at runtime without extra link
tags.
It could probably be done with metadata (@require("js/jquery.js")),
macros and/or a custom js generator.

Regards,
Clément

On Fri, Oct 21, 2011 at 5:39 PM, benjamin Dubois <[hidden email]> wrote:
> Ok I see, I try it.
> Just a simple extra question. How do I make the difference between the haxe
> generated js and extern.
> I mean jquery is part of the API, there may be some others libs.
> Simply wait for an execution failure that tells me the lib is missing ?
> Ben
> On Fri, Oct 21, 2011 at 5:32 PM, clemos <[hidden email]> wrote:
>>
>> Hi Benjamin,
>>
>> In this situation, you can ask haXe not to embed JQuery by using this flag
>> :
>> -D noEmbedJS
>> This way, you're free to <link> first jquery.js, then extensions, and
>> finally your haXe js.
>>
>> IMHO the way haXe embeds JQuery by default is made to make it work
>> quickly, but in the long run, you almost always need to not embed it.
>> I've also discovered that such embedded scripts are pasted in the end
>> of the haXe generated script, which makes it impossible, for example,
>> to extend these externs.
>> I'll probably create a ticket for this improvement as soon as I have a
>> simple real-life case.
>>
>> Regards,
>> Clément
>>
>> On Fri, Oct 21, 2011 at 5:21 PM, benjamin Dubois <[hidden email]>
>> wrote:
>> > It was the html part that I missed.
>> > However how would I put jqueryUi between jquery.js and my
>> > haxegenerated.js
>> > since both are in the same file since jquery is generated from haxe ?
>> > I'll try to put it before or after but I'm expecting a hence/egg
>> > dilemna.
>> > Ben
>> >
>> > On Fri, Oct 21, 2011 at 4:37 PM, david <[hidden email]> wrote:
>> >>
>> >> hi ben !
>> >>
>> >> David, using jQueryUi plugin was my first idea. How do you include the
>> >> js
>> >> code to the project ? I've never used a non-haxe-lib extern library.
>> >>
>> >> i'm not sure how to understand your question ....
>> >> in your haxe class
>> >> import js.JQuery
>> >> import jquery.ui.Draggable;
>> >> function test();
>> >> var drag:Draggable= new Draggable("#selector");
>> >> var opt:DragabbleOptions= cast {};
>> >> opt.grid=true ;/// for example
>> >> drag.draggable(opt);
>> >>
>> >> of course you have to include your jqueryui js file inside your html
>> >> but after your jquery.js ( do not use macro embedding )
>> >> and before your haxegenerated js.
>> >> is that so ?
>> >> cheers
>> >> postite
>> >>
>> >>
>> >> --
>> >> haXe - an open source web programming language
>> >> http://haxe.org
>> >
>> >
>> > --
>> > haXe - an open source web programming language
>> > http://haxe.org
>> >
>>
>> --
>> haXe - an open source web programming language
>> http://haxe.org
>
>
> --
> haXe - an open source web programming language
> http://haxe.org
>

--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org