DRAGNDROP

---

Kimera CSS is approaching its peak. We will build the last parts and prepare the work for major changes and new projects steps. These steps towards the future will necessarily drastic changes of this repo. We invite everyone to download and update the packs used to avoid finding themselves with no references on their sites and apps, ex: don't rely on cdn! They will probably be lost. Thank you all.

---

If you like this project, you would like to click on the ★ above the github page and follow us on the official fanpage: kimera framework

---

 

DRAG AND DROP SYSTEM

 

---

 

The drag and drop system of the framework allows a user to move "containers" within a certain "layer".

In summary, the following is its concept in code:

<div class="grabslot-[NAMEOFDRAGGABLELAYER]">

    <!--draggable contents-->
    <div class="grabbox">
        ....
    </div>

</div>

it is immediately understood that all the "grabboxes" contained in "NAME OF DRAGGABLE LAYER" can be among them. however ... be careful! the layer is not "nameof ..." but its name itself! So it is only valid in this way:

<div class="grabslot-[mycrosslayer]">
    <div class="grabbox"> movable into other mycrosslayer </div>
</div>

<div class="grabslot-[mycrosslayer]">
    <div class="grabbox"> movable into other mycrosslayer </div>
</div>

<div class="grabslot-[mycrosslayer]">
    <div class="grabbox"> movable into other mycrosslayer </div>
</div>

<div class="grabslot-[otherlayer]">
    <div class="grabbox"> movable into other otherlayer </div>
</div>

At this point, once the containers have been moved, all that remains is to extract the order and contents. infact, at the end of the movement, the framework will update the object to be returned with all the contents of the containers.

from 2.8.x we introduced a ui object...
with "ui.draganddrop" return all parameter and content of all layer of drag and drop system.

this is a stupid exemple taken from the tester's files :

window.onload = () =>
    {

        document.getElementById('testvalues').onclick  = () => print_ui();

        function print_ui()
        {

            console.log("ui.draganddrop : ",ui.draganddrop);

            let printer = document.querySelectorAll('#printer')[0];
            printer.innerHTML = 'Wait/Refresh....';
            setTimeout(()=>{
                printer.innerText = JSON.stringify(ui.draganddrop,null,2);
            },500)

        }

    }

You can see [✱ here] an example of the system in a practical way.

In the end... Pay attention to what you store in the containers. Remember that the framework will store the contents of the latter. Not all clients have enough potential for large json.

---

 

Step by step from start

Install the files and set up the document. The topic: [from start to...]

Back: All Ui

List and use of all buttons of the framework. The topic: [Ui Assets]

Next: The Effector add-on

How make an interaction effect direct via framework. The topic: [Effector]