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: Droppable |…

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… …

[image] andreswaby: my attempts seem to not produce any results. “It doesn’t work” is not a good question. Please see Posting Guidelines for the Code Help Category

Thanks Sam. I have updated my query.

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.

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 Cus…

[image] andreswaby: "script src=“ https://code.jquery.com/jquery-1.12.4.js ” "script src=“ https://code.jquery.com/ui/1.12.1/jquery-ui.js ” Here you go. I made a demo for you. http://jquery-drag-drop-demo.webflow.io/

Code blocks can be formatted by selecting the pasted code and clicking the “Preformatted Text” option in the rich-text editor:[image] 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…

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.

[image] andreswaby: placed only this code in the FOOTER 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 .

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?

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!

Drag and Drop function

Design help Custom code

samliew (webflowexpert.com) June 5, 2017, 11:59pm 2

“It doesn’t work” is not a good question.

Please see Posting Guidelines for the Code Help Category

Topic		Replies	Views
How to make my site be able to drag and drop? General	1	3488	June 11, 2014
Drag and drop conditional not working Custom code	0	1065	March 27, 2020
Importing 'Drag and Drop' feature from HTML5 Custom code	0	1199	August 26, 2020
Jquery - Draggable/Droppable Help Custom code	1	1160	March 16, 2018
Draggable Divs. Please check code Custom code	2	2338	February 21, 2022

Drag and Drop function

Related topics