Drag & Drop

Rédigé par BeHuman Aucun commentaire
Classé dans : HTML/CSS/JavaScript Mots clés : aucun

Voilà un petit script en HTML/CSS/Javascript vous montrant comment faire un drag & drop d'un bloc DIV, le script fait la démo d'une boite de dialogue mouvable et masquable.

Visualiser la démo

<html>
    </head>
<script language="javascript">
var startX = 0;
var startY = 0;
var offsetX = 0;
var offsetY = 0;
var dragElement;

InitDragDrop();
function InitDragDrop(){ document.onmousedown = OnMouseDown; document.onmouseup = OnMouseUp; }

function OnMouseDown(e){
   if(e == null) e = window.event;
   var target = e.target != null ? e.target : e.srcElement;
   if((e.button == 1 && window.event != null || e.button == 0) && target.className == 'item_drag' || target.id == 'item_header' || target.id == 'item_footer'){
        if (target.id == 'item_header' || target.id == 'item_footer') {
            target = target.parentNode;
        }
      startX = e.clientX;
      startY = e.clientY;
      offsetX = number(target.style.left);
      offsetY = number(target.style.top);
      dragElement = target;
      document.onmousemove = OnMouseMove;
      document.body.focus();
      document.onselectstart = function(){ return false; };
      target.ondragstart = function(){ return false; };
      return false;
   }
}

function OnMouseMove(e){
   if(e == null) var e = window.event;
   dragElement.style.left = (offsetX + e.clientX - startX) + 'px';
   dragElement.style.top = (offsetY + e.clientY - startY) + 'px';
}

function OnMouseUp(e){
   if(dragElement != null){
      document.onmousemove = null;
      document.onselectstart = null;
      dragElement.ondragstart = null;
      dragElement = null;
   }
}

function number(val){ var n = parseInt(val); return n == null || isNaN(n) ? 0 : n; }
</script>

<style>
.item_drag {
    position:absolute;
    padding:25px;
    box-shadow:1px 1px 3px #333;
    border-radius:3px;
    background-color:rgba(227,227,227,0.8);
    z-index:0;
    cursor:pointer;
    -webkit-transition:box-shadow 500ms;
}
.item_drag:hover {
    z-index:1;
    box-shadow:2px 2px 5px #333;
}

/*barre des titre*/
#item_header {
    position:absolute;
    top:0px;
    width:100%;
    left:0px;
    border-radius:3px 3px 0px 0px;
    box-shadow:0px 0px 0px #333;
    color:rgba(227,227,227,0.8);
    text-align:center;
    background-color:rgba(10,10,10,0.8);
    cursor:pointer;
    overflow:hide;
}
#item_header:hover {
    box-shadow:0px 1px 2px #333;
}

#item_header_buttons {
    position:absolute;
    left:5px;
    top:0px;
}

/*Contenue de la fenêtre*/
#item_content {
    cursor:default!important;
}

/*barre des status*/
#item_footer {
    position:absolute;
    bottom:0px;
    width:100%;
    left:0px;
    border-radius:0px 0px 3px 3px;
    background-color:rgba(200,200,200,0.8);
    cursor:pointer;
}
</style>

    </head>
    <body>
    
        <div class="item_drag" id="f1">
            <div id="item_header">
                <div id="item_header_buttons">
                    <span id="item_header_buttons_close" onClick="this.parentNode.parentNode.parentNode.style.display='none';">x</span>
                    <span id="item_header_buttons_minimize">-</span>
                    <span id="item_header_buttons_shape" onClick="this.parentNode.parentNode.parentNode.style.height='5px'; this.parentNode.parentNode.parentNode.getElementById('item_content').style.visibility='hidden'">_</span>
                    <span id="item_header_buttons_maximize">^</span>
                </div>
                Titre de la fen&ecirc;tre
            </div>
            <div id="item_content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Quisque lobortis erat quis ipsum malesuada suscipit id nec nibh.<br> Nulla risus ipsum, tempus et faucibus vel, imperdiet a nisl.<br> Vivamus velit lacus, volutpat in varius at, commodo sit amet nunc.<br> Mauris viverra, elit sagittis luctus tempor, purus enim tincidunt ligula, eu pharetra massa nisl id eros.<br> Donec hendrerit sagittis porta. Praesent rutrum adipiscing ipsum, cursus sodales turpis consequat ut.<br> Suspendisse eget erat leo, a iaculis ipsum. Mauris tristique purus faucibus nisi pellentesque viverra.<br> Aliquam feugiat, risus in ultricies posuere, neque diam vestibulum risus, vitae commodo elit enim a quam. Nam ac lacus risus, nec hendrerit justo.<br> Sed sed diam leo, vel sollicitudin metus. Aenean sodales blandit tortor eget pharetra.
                </p>
            </div>
            <div id="item_footer">barre des status</div>
        </div>

    </body>
</html>

Visualiser la démo

Écrire un commentaire

Quelle est la dernière lettre du mot 89ubgec ?

Fil RSS des commentaires de cet article