Skip to main content
B
Bobby Jourdan
Inspiring
April 23, 2018
Question

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

  • April 23, 2018
  • 3 replies
  • 4142 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.

3 replies

A
Abhimanyu Sood
Participant
May 7, 2020

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
David Burnham HBA
Inspiring
April 24, 2018

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
Lilybiri
Legend
April 24, 2018

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
Dirlo
Inspiring
April 27, 2018

...

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
RodWardCommunity Expert
Community Expert
April 23, 2018

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
April 23, 2018

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

sabre123
sabre123
Participating Frequently
April 23, 2018

...

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

...


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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices