Streaming live at 10am (PST)

Drag and Drop function


#1

I am trying to get the drag+drop function to work as my attempts seem to not produce any results.
My design is inspired by this site, and would really like to capture the essence of that structure:

I am following the source code found here:
http://jqueryui.com/droppable/

Any advice on how to properly apply this in the designer that will enable the element to respond accordingly would be greatly appreciated.

Read-Only:
https://preview.webflow.com/preview/opentime-web?preview=65cafb069bfab252e0c0a35c8a278dba

Published link:
http://opentime-web.webflow.io/

Hope this helps.

Regards,
ASCS


#2

"It doesn't work" is not a good question.

Please see https://forum.webflow.com/t/posting-guidelines-for-the-code-help-category/6048?u=samliew


#3

Thanks Sam.
I have updated my query.


#4

Drag Drop is not difficult to implement... but since Webflow will not execute JQuery code in Preview Mode... you have Publish or Export it... for it to work.


#5

I did publish it... nothings happening.

I'm wondering if I missed something and what would that be?

I've added the script tag under Custom Code:
"script src="https://code.jquery.com/jquery-1.12.4.js"
"script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"

and under in the Designer's HEAD Custom Code, added:
start script tag
$( function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
} );

end script tag

and before body:
div id="draggable">
id="droppable">

I would like to have this code custom for this specific, I have no clue about coding... I'm a hardcore designer.
items like .html( "Dropped!") are not necessary for the design and subsequently I would like this drag and drop to trigger another action.

Relp?!


#6

Here you go. I made a demo for you.

http://jquery-drag-drop-demo.webflow.io/


#7

Code blocks can be formatted by selecting the pasted code and clicking the "Preformatted Text" option in the rich-text editor:

Looking at your site, you do NOT need to include a second jQuery script reference, as Webflow already does it. Having a second will only cause conflicts.

After that, move all the code to the FOOTER code instead and re-publish.


#8

Hey @Samliew,
I removed all codes from HEADER and have now placed only this code in the FOOTER:
script src="//code.jquery.com/ui/1.10.4/jquery-ui.js">

Republished.
Nothing.


#9

That's not enough. You need all the previous code in the footer except the jquery one.

See Revolution's demo.

If you need a developer to implement it for you, you can contact me here.


#10

Hey @Revolution and @samliew ,

GASP!...
The drag function now works after adding all codes to the footer. However, its not dropping to the targeted area.
Can you tell me which pf the jquery code to not include in the footer and where should it be instead if not apart of the markup?


#11

You moved your custom code our of the page - into the project.

And because of that... I cannot see your custom code...

other than the 2 div's you created in the page/custom code section.

Just clone the project I provided... that way you can go through step by step.

In summary

in your header section... place the jqueryui css.

in the footer section... place the jqueryui function and the http call to grab the jqueryui library.

As @samliew said... don't add the jquery code. Webflow already includes the jquery link for you.

Im leaving the office now and heading home.

I have more work to do at home... so I'll be up for awhile.

The demo should be pretty self-explanatory though.

Take a look at it.

http://jquery-drag-drop-demo.webflow.io/


#12

Thanks @Revolution,
I will try to do just that. There is a end script missing from a line of your demo, can you fix that? I will just copy+paste and mess with it to see what works?

Thanks so much!


#13

ahh... so there is. Now fixed. Thanks for telling me.

I outta here. Will be home in about 10 minutes.

Need to get a bite to eat... and then get working again.

Gonna be another 1-2am night :frowning:


If you copy and paste... it should work right off the bat.


#14

hehe... I don't code but at least I know what a string is supposed to look like :joy:

I know those long nights man... En guete! (Enjoy your meal)

And thanks again... so much!


#15

@Revolution,
Another question, you can reply tomorrow if its not too much.

How do I get it to trigger another action (i.e. direct to another page, or trigger animation, etc) after dropping into the target area.

New hiccup... so I've updated my design to now include multiple divs (as intended) to drag and drop and did this...
$( function() {
$( "#draggable-1" ).draggable();
$( "#draggable-2" ).draggable();
$( "#draggable-3" ).draggable();
$( "#draggable-4" ).draggable();
$( "#draggable-5" ).draggable();
$( "#draggable-6" ).draggable();

the interaction is now "iffy"...

Advice?