Autres déplacer de éléments dans un webbrowser dans userform

patricktoulon · 24 Février 2022

Bonjour a tous
je suis en train de mettre a jour mon app CDO dans un userform
et mon code perso (en Javascript )de draganddrop and affiliation déconne un peu dans le document du webbroser

le principe est simple
je déplace les images ou les balises DIV et quand elle tombent a l’intérieur d'un autre cet autre devient son parent pour les images c'est pareil
quand il changent de parent (que je le lâche de la souris il reste en en place là ou il été déposé (ce que le draganddrop natif ne fait pas)

il se passe un truc bizarre
quand je ressort du parent et que je tombe sur le parent div principal( id =editor) le placement ne reste pas a sa place il remonte un peu

si on a des cadors en JS ici je suis preneur
un exemple de document en html fonctionne sur chrome et IE
CHANGEZ L'EXTENTION DU FICHIER EN ".HTML"

merci pour les retours

patricktoulon · 24 Février 2022

re
c'est bon j'ai trouvé
c’était le offsetTop et OffsetLeft du conteneur principal qui n'est pas en top 0

code DragAndDrop+Affiliation opérationnel

exemple

HTML:

<!DOCTYPE html>
  <html>
 
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=10"/>
    <title>HTML5  Drag and Drop perso affiliation put on same place  By patricktoulon  </title>
   <style type="text/css">
   </style>
 

<script>
var xx, yy, dragged, vue, EcX, EcY, OldBordure, oldparent, editeur;

window.addEventListener('mousemove', mousemove);



////////////////////////////////////////////////////////////
function mousemove(event) {
        xx = event.pageX;
        yy = event.pageY;
        if (dragged != null) {
                vue.innerHTML = event.pageX;
                dragged.style.position = 'absolute';
                dragged.style.left = xx - EcX + "px";
                dragged.style.top = yy - EcY + "px";
        }
}

////////////////////////////////////////////////////////////

function DragStart(ev) {
        dragged = ev.srcElement;
        oldparent = dragged.parentElement;
        OldBordure = dragged.style.border;
        vue = document.getElementById('vue');
        EcX = ev.pageX - dragged.offsetLeft;
        EcY = ev.pageY - dragged.offsetTop;
        vue.innerHTML = EcX;
        ev.stopPropagation();
        ev.returnValue = false;
        ev.preventDefault();
        ev.returnValue = false;
        dragged.style.border = "4px dotted red";
        dragged.style.zIndex = 1;
}
//////////////////////////////////////////////////////////
function MouseUp(ev) {
        dragged.style.border = OldBordure;
        affiliation(ev);
}

///////////////////////////////////////////////////////////
function affiliation(ev) {
        var rect1 = dragged.getBoundingClientRect();
        var r1l = rect1.left;
        var r1t = rect1.top;
        var r1b = rect1.bottom;
        var r1r = rect1.right;
        var boxes = document.getElementsByTagName("div");
        for (var i = 0; i < boxes.length; i++) {
                var rect2 = boxes[i].getBoundingClientRect();
                var r2l = rect2.left;
                var r2t = rect2.top;
                var r2b = rect2.bottom;
                var r2r = rect2.right;

                if (r2l < r1l && r2t < r1t && r1b < r2b && r1r < r2r) {
                        var newparent = boxes[i];
                }

        }
        //alert(oldparent.id);
        if (oldparent.id != newparent.id) {
                var rect2 = newparent.getBoundingClientRect();
                if (newparent.id == 'editor') {
                        var xz = editeur.offsetTop;var yz=editeur.offsetLeft;
                } else {
                        var xz = 0;var yz=0;
                }
                dragged.style.left = rect1.left - rect2.left+yz + "px";
                dragged.style.top = rect1.top - rect2.top + xz + "px";
                newparent.appendChild(dragged);

        }

        dragged.focus;
    dragged = null;
        oldparent = null;
        newparent = null;

}
/////////////////////////////////////////////////////////
function AllDraggable() {
        var boxes = document.getElementsByClassName('bouge');
        for (var i = 0; i < boxes.length; i++) {
                boxes[i].draggable = 'true';
                boxes[i].addEventListener('dragstart', DragStart);
                boxes[i].addEventListener('mouseup', MouseUp);
        }
}
 </script>
  </head>
 <body>
   <p>Déplacer l'image et échange de parent à volonté : <font id='vue'></font>
   </p>
   <div id='editor' contenteditable='true' style="width:600px;height:800px;background-color:rgb(230,230,230);">
   
    <div id='div0' class='bouge' ' style=' position:absolute;left:300px;width:200px;height:200px;background-color:rgb(123,245,232);'></div>
     
    <div id='div1' class='bouge' ' style=' position:absolute;left:50px;top:400px;width:180px;height:180px;background-color:rgb(255,245,232);'></div>
     
    <br>
 
    <img id='drag1' class='bouge' src='https://www.excel-downloads.com/styles/brivium/stylium/strontium/xenforo/logo.png' width='150' height='70'>
   </div>
 
    <script>
    document.getElementById('div0').style.border = '3px solid blue';
    document.getElementById('div1').style.border = '3px solid orange';
    AllDraggable();
    editeur = document.getElementById('editor')
    </script>
</body>
</html>

Effectuez une recherche sur Excel Downloads...

Autres déplacer de éléments dans un webbrowser dans userform

patricktoulon

XLDnaute Barbatruc

Pièces jointes

patricktoulon

patricktoulon

XLDnaute Barbatruc

Discussions similaires

Membres actuellement en ligne

Partager cette page

Tutos vidéos

Statistiques des forums