Limit the movement of the draggable object in a drag and drop interaction

[Bobby Jourdan]

Hi there,

I am imitating a tablet slider with a Drag and Drop interaction (see the image).

- The draggable object is a smart shape with an image fill - the hand in red in the image.

- The drop area is a transparent shape - the green circle in the image.

- On success and On failure are both "Go to the next slide"

This is how the user "browses though pages".

All good, but the issue is that the draggable object can be moved high up or left and can even disappear from the screen. I have ticked the "Redrag the droped source" option. It works well as flash file, but as HTML 5 the draggable object can be moved more...

I was thinking - is there a way to limit the movement of the draggable horizontally only?

Thanks in advance

B

[RodWard]

There is a widget that allows you to do this for SWF output but NOT for HTML5:

http://www.infosemantics.com.au/adobe-captivate-widgets/slider-component

[Bobby Jourdan]

Thanks Rod, but we are producing 100% HTML5 only.

[TLCMediaDesign]

I would look into using jQuery draggable. There is a parameter (containment) that restricts to movement of the drag object. The containment parameter can be any object.

It's not too difficult to set up and there are many examples out there. This one is pretty good:

JqueryUI Draggable

[Dirlo]

...

Hi there !...

I have tested many codes... but still can't manage to make an object draggable with jquery !!...

Can you give us a simple example please ?

...

[TLCMediaDesign]

Here is another example, you can click on the view source button.

https://jqueryui.com/draggable/#constrain-movement

[Dirlo]

...

Thanks but this doesn't help me so far as I can't manage to write the right code for doing it !...

What is wrong with that ? (I have an object which I called draggable, and put this code in the enterframe action, in the JavaScript window)

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

or even this (with my object named drag) :

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

But nothing happened !!... ???...

...

[TLCMediaDesign]

You are going to need to build an HTML page and insert it into Captivate as an HTML5 animation.

You are not going to be able to just put the code in a script window without really knowing what you are doing and how Captivate creates and names objects.

[Dirlo]

...

And that's the problem... I've been using Captivate for 6 months now...

And this question of drag with JQuery has occurred to me really early :

Dragging an object using Jquery

But I couldn't find anything (resource, documentation...) on the web to help me ???...

Maybe you could be my teacher ??...

...

[TLCMediaDesign]

You will need to add a "c" to the name of your element.

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

Then you need to make sure the jquery-ui.js is load after the jquery.js like so in the index.html:

var lJSFiles = [  'assets/js/jquery-2.1.4.min.js','assets/js/jquery-ui.js',

[Dirlo]

...

Great thanks for your help !...

But there's still a problem...

When I publish to html5, I got this line in the index.html :

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

As you can see, I added the Jquery-ui... (I also added the file in the folder assets...)

Could the problem be linked with the version of jquery ? (you have 2.1.4 and I still have the "old" version 1.11.3)

I will download the 2.1.4 and make another test !... (I cross my fingers it will work this time !!!... )

...

[Dirlo]

...

Pfffff...

Unfortunately, I still couldn't manage to drag anything...

I try with the last version of Jquery (3.3.1)... Then with your version (2.1.4)...

I verified the Js code... Adding the "c" to the name of my image (Dg3)...

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

Then I published in html5...

I added the Jquery and Jquery-ui files in the assets folder... I changed the html file code...

Then I uploaded the project to my internet folder :

http://soutien67.fr/essai/Drag_Try_2/

And I'm still pulling my hair out as nothing move !!!...

Need more help please !!...

...

[sabre123]

Go to the URL you pasted above, ppen up the console in your Developer Tools in your browser and type:

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

hit enter

then click and drag your box. For me, I had to click it twice for whatever reason, but I am able to drag it around after that. How that translates into fixing your issue within CP, I do not know and I am too busy to test. Maybe someone else will chime in.

[Dirlo]

...

Unbelievable !!...

Thanks sabre123 !... Effectively, I manage to drag my draggable as you say in my browser !...

This means I'm near a solution (?) and this gives me more hope to manage at last to move something with Jquery and Captivate !...

But as you say, it's not THE solution !...

So again, more help is needed !... If someone has managed to do it, please give us THE solution !...

Many thanks in advance !...

...

[TLCMediaDesign]

All I can say is that my solution worked for me. What type of object are you trying to move, is it a SmartShape?

Use $("#Dg3").draggable();, it doesn't appear that you need to try and move the canvas element which has the "c".

Also, if you look in the console, it says:

Extra "<body>" tag found. Only one "<body>" tag should exist per document.

This would not stop the code from executing, but should be fixed.

[David Burnham HBA]

I used the infosemantics widget as well when output was flash based. I thank them for that.  I know SL has a slider that would allow you to do this in about a second. I could use a similar object in Captivate working in html5. I find sliders and dials really useful in gaming, navigation and timeline concepts. I appreciate all the programming help offered by folks below, but when I see this I cringe, the majority of us are not "programmers" - I thought that was why I am using Captivate - eLearning without programming.

[Lilybiri]

Totally agree, David, I used all of InfoSemantics widgets, and although CpExtra widget replaced those SWF widgets for many use cases, no slider nor rotator. 

It also leads many users to believe they have to use JS even for situations where advanced actions or even core features of Captivate would be much quicker. I'm not pointing to the JS experts like those helping in this thread, but to less experienced users who seem to believe that you need real programming skills. That argument is also used by concurrent tools of course.

[Dirlo]

...

Hi there !...

I finally manage to drag something with Jquery !!!...

But what a fight !!!...

And to tell you the true, I didn't understand all I've done... And I don't understand clearly MY solution !...

So...  Here you'll see that the things could move in the two slides :

(On the first slide it's an imported image (Dg3), and on the second slide it's a smart-shape (Dg4) (But no difference, both could move !)

http://soutien67.fr/essai/Drag_Try_2/

And for this I had to write two times the code (one time with the _c and one time without !...)

(I put the Javascript action one time in the enter-slide action, and on the second slide in an advanced action )

First code :

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

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

Second code :

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

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

So... That's what I don't really understand !... ... But it appears to drag as expected !...

So I made another project with only one line of code (I delete one with the _c on one draggabble, and the other in the other slide)

But nothing works... !!!

http://soutien67.fr/essai/Drag_Try_3/

So I come back with my first try... I added the second line of code as above...

And it works again !!!...

http://soutien67.fr/essai/Drag_Try_1/

So my solution is :

You have to put the 2 lines of code :

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

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

!!!...

If someone could explain this... I'd like to read it !...

Best !...

PS : now that this is done, I will have to try to make my draggable rotate-able !... But this is another story !...

...

[Abhimanyu Sood]

To limit dragging to horizontal axis only in your HTML5 captivate project - 

Navigate to CPM.js (assets/js/CPM.js)

Open it in Notepad++ or Sublime

Find the following string -

a.m_dummyCanvas.element.style.top=parseInt(a.m_dummyCanvas.element.style.top,10)+(e.Y-a.m_previousmousetop)/c.scaleFactor+"px";

There will be only one such occurrence.

Delete this entire string and save your file. Then reload your project.

Done!