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: https://www.aarongrieve.co.uk/work
I am following the source code found here:
Any advice on how to properly apply this in the designer that will enable the element to respond accordingly would be greatly appreciated.
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.
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.
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.
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?
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?
@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();