Jump to content

Creation zone drag and drop pour ajout de Product Box


Recommended Posts

Salut les dev,

Je suis en train de réaliser un carousel 3D pour mon site e-commerce, sur lequel je souhaite intégrer mes produits de façon dynamique.

J'ai créé des zones de drag and drop sur chaque éléments de mon carousel via des cases html (en utilisant le code d'une colonne vide), pour recevoir mes "Product Box"

La zone se créée bien, mais le drag and drop de mes produits sur les colonnes ne fonctionne pas...

Si quelqu'un a la solution , qu'il se manifeste  :)

Merci !

 

Voici mon code pour une zone HTML :

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>shopephemere.fr</title>
</head>
<body>

<div id="product-carousel-container">
    <ul id="product-carousel">

        <!--        ************************************ 1 ***********************************-->

        <li class="item-1">
            <div class="elementor-product-box">
              <div class="elementor-container elementor-column-gap-default">
            <div class="elementor-row ui-sortable"><div data-id="jj2f67n" data-element_type="column" class="elementor-element-jj2f67n elementor-column elementor-top-column elementor-element ui-resizable" data-col="100" data-model-cid="c35">
                    <div class="elementor-element-overlay">
            <div class="column-title">100.0%</div>
            <div class="elementor-editor-element-settings elementor-editor-column-settings">
                <ul class="elementor-editor-element-settings-list elementor-editor-column-settings-list">
                    <li class="elementor-editor-element-setting elementor-editor-element-trigger ui-sortable-handle">
                        <a href="#" title="Glisser la colonne">Colonne</a>
                    </li>
                                            <li class="elementor-editor-element-setting elementor-editor-element-duplicate">
                            <a href="#" title="Dupliquer">
                                <span class="elementor-screen-only">Dupliquer</span>
                                <i class="fa fa-files-o"></i>
                            </a>
                        </li>
                                            <li class="elementor-editor-element-setting elementor-editor-element-add">
                            <a href="#" title="Ajouter">
                                <span class="elementor-screen-only">Ajouter</span>
                                <i class="fa fa-plus"></i>
                            </a>
                        </li>
                                            <li class="elementor-editor-element-setting elementor-editor-element-remove">
                            <a href="#" title="Retirer">
                                <span class="elementor-screen-only">Retirer</span>
                                <i class="fa fa-times"></i>
                            </a>
                        </li>
                                    </ul>
                <ul class="elementor-editor-element-settings-list  elementor-editor-section-settings-list">
                    <li class="elementor-editor-element-setting elementor-editor-element-trigger">
                        <a href="#" title="Glisser la section">Section</a>
                    </li>
                                            <li class="elementor-editor-element-setting elementor-editor-element-duplicate">
                            <a href="#" title="Dupliquer">
                                <span class="elementor-screen-only">Dupliquer</span>
                                <i class="fa fa-files-o"></i>
                            </a>
                        </li>
                                            <li class="elementor-editor-element-setting elementor-editor-element-save">
                            <a href="#" title="Enregistrer">
                                <span class="elementor-screen-only">Enregistrer</span>
                                <i class="fa fa-floppy-o"></i>
                            </a>
                        </li>
                                            <li class="elementor-editor-element-setting elementor-editor-element-remove">
                            <a href="#" title="Retirer">
                                <span class="elementor-screen-only">Retirer</span>
                                <i class="fa fa-times"></i>
                            </a>
                        </li>
                                    </ul>
            </div>
        </div>
                            <div class="elementor-column-wrap elementor-element-empty">
            <div class="elementor-background-overlay"></div>
            <div class="elementor-widget-wrap ui-sortable"><div class="elementor-empty-view">
    <div class="elementor-first-add">
        <div class="elementor-icon eicon-plus"></div>
    </div>
</div></div>
        </div>
                <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;"></div></div></div>
        </div>
            </div>

        </li>

 

carousel.thumb.png.d6a6408ceebb6f089e2ce4d74fcd1161.png

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More