Drag & Drop
Rédigé par BeHuman
Aucun commentaire
Classé dans : HTML/CSS/JavaScript
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.
<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ê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>