Dragging an object using Jquery

[Dirlo]

...

Hi all !...

I'm still having a problem with the dragging (and rotating) function...

(See here my previous post : Rotate an image with a button in html5 )

So now I think I have to try to avoid the Captivate's Widget dragging function and try to drag my object using JQuery.

My object's name is "Regle_3".

So I try to add a javascript function in the opening of my slide :

I try many options (I'm not a pro in Js !!...) :

$("[id='Regle_3c']").draggable();

$( "#Regle_3" ).draggable();

$( "#Regle_3c" ).draggable();

But without any success so far... So is it possible to drag an object with Jquery in Captivate ? And how ?...

Thanks a lot !...

...

[Dirlo]

...

It's me again !...

I'm becoming desperate about this question...

I try to add jquery-1.12.4.js and jquery-ui.js in the project... (as I did with JQueryRotate.js)...

I try many options with the coding... and still didn't manage to drag anything...

Please, just let me know if it's possible (or not !??)... and if it exists a link or a clue to help my mind !...

Thx in advance !...

...

[RodWard]

If you are testing this by just playing the content locally from your hard drive, THAT might be why it's not working.

Try testing from a web server.

[Dirlo]

...

Thx Rod for your answer !...

But I think it's in the javascript code that there is a problem...

What I did so far :

- I use this resource : https://jqueryui.com/draggable/

(So I download both "jquery-1.12.4.js" and "jquery-ui.js")

In captivate (last version), in a slide, I put a rectangle form, which I name "drag".

In the opening action panel of the slide, I put the javascript code : $( "#drag" ).draggable();

(And try also many other options without the #, or with a c "dragc" and many others...)

Then I publish my project...

Then I add in the assets/js folder the two js files I have downloaded previously.

Then I change the code of the index.html file of the project, adding the links to the js files :

var lJSFiles = [  'assets/js/jquery-1.11.3.min.js','assets/js/CPM.js','assets/playbar/playbarScript.js','assets/js/jquery-1.12.4.js','assets/js/jquery-ui.js' ];

So I think everything is ok on my hard drive ???... (previously with the RotateJs, I didn't need to put it on a web server and it was ok !)

So I think the problem is in the javascript code I put in the opening action panel... ???

$( "#drag" ).draggable();

(And I don't want to try all the versions I tried on a web server before being sure of the javascript coding... (I tried so many options !!!...))

So what's wrong ?...

...

[RodWard]

I'm not really an expert with JavaScript so I will have to hope that one of those that are JS experts on this forum can chime in to help you.  But I do know that you really should be testing your content from the same delivery platform on which it will eventually be served.  Otherwise you are not getting a true picture of what works and what does not.

Like many other things in Captivate e-learning content, JS code can often be blocked when you try to play something from your local hard drive.

What you are trying to do is not necessarily simple.  So I would be trying to get something really simple to work first that uses the jquery library so that you can first prove you are getting it to load at all. Then once you actually know you can access all the necessary functions, try to do something more challenging.  As it stands, are you able to call any jquery functions successfully?

[Dirlo]

...

Thanks again Rod !...

As I wrote before, I managed to implement the JQueryRotate easily (with the help of Jeremy !...) in Cpt...

So I had a brilliant idea !... Putting all the different codings that could work in the same project !... ... So I could put it easily on a web server !...

But... Unfortunately... none of them seems to be working... Either from my local drive... Neither when I put the project on a web server...

I hope some javascript pro will see my problem and give us a good answer !...

Thx anyway !...

PS : I'm really surprised that I don't find any resources... Making a drag action (without the widget) with JQuery seems to be a basic operation ??...

...

[Dirlo]

...

Done it !!...

Drag and rotate the same object with JQuery and JQueryRotate !...

...