Inspiring

Question

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

Forum|Forum|7 years ago
April 23, 2018
3 replies
4138 views

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

This topic has been closed for replies.

A

Abhimanyu Sood

Participant

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!

David Burnham HBA

Inspiring

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

Legend

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

Inspiring

...

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 !...

...

RodWard

Community Expert

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

B

Bobby JourdanAuthor

Inspiring

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

Dirlo

Inspiring

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

...

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 ?

...

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded