I need to drag and drop different shapes into a box. I have seen several codes in the internet, but I don't know how to insert them into my website.
Some help please.
Important forum update
This forum is migrating to one unified Wix community forum starting July 26th, and will be read-only during the process.
Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
The link to the example is broken
Thanks a lot, Liran. I'll have a look at it.
Oh... I see.
So, basically Wix Code does not support drag & drop ( yet :) ). Please feel free to submit a feature request here.
For now, I can suggest an alternative...
Have a look at this example.
Liran.
Sorry, I'm afraid I didn't explain myself. What I need is that the site visitor can drag and drop different shapes into a box.
Nope... Just the regular editor :)
Are you refering to a wix app?
Hi,
You actually don't need Wix Code (or any code actually) to do that (that's a part of Wix Magic).
This forum is specialised in Wix Code... I suggest you contact Wix Support as they know best how to help you.
Liran.
Here is an example:
/* The dragging code for '.draggable' from the demo above * applies to this demo as well so it doesn't have to be repeated. */ // enable draggables to be dropped into this interact('.dropzone').dropzone({ // only accept elements matching this CSS selector accept: '#yes-drop', // Require a 75% element overlap for a drop to be possible overlap: 0.75, // listen for drop related events: ondropactivate: function (event) { // add active dropzone feedback event.target.classList.add('drop-active'); }, ondragenter: function (event) { var draggableElement = event.relatedTarget, dropzoneElement = event.target; // feedback the possibility of a drop dropzoneElement.classList.add('drop-target'); draggableElement.classList.add('can-drop'); draggableElement.textContent = 'Dragged in'; }, ondragleave: function (event) { // remove the drop feedback style event.target.classList.remove('drop-target'); event.relatedTarget.classList.remove('can-drop'); event.relatedTarget.textContent = 'Dragged out'; }, ondrop: function (event) { event.relatedTarget.textContent = 'Dropped'; }, ondropdeactivate: function (event) { // remove active dropzone feedback event.target.classList.remove('drop-active'); event.target.classList.remove('drop-target'); } });