Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
* {
    margin: 0px;
    padding: 0px;
}
a {
    text-decoration: none;
}
.drag {border: 1px solid black; background-color: rgb(240, 240, 240); position: relative; padding: 0.5em; margin: 0 0 0.5em 1.5em; cursor: move;}
-->
</style>
</head>

<body>
<div class="drag">Item 1</div>
<div class="drag">Item 2</div>
<pre id="debug"> </pre>
<script language="JavaScript" type="text/JavaScript">
<!--
var _startX = 0;            // mouse starting positions
var _startY = 0;
var _offsetX = 0;            // current element offset
var _offsetY = 0;
var _dragElement;            // needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0;            // we temporarily increase the z-index during drag
var _debug = $('debug');    // makes life easier
function InitDragDrop(){
    document.onmousedown = OnMouseDown;
    document.onmouseup = OnMouseUp;
}
function OnMouseDown(e){
    if (!e) {e = window.event; }
    var target = e.target != null ? e.target : e.srcElement;
    _debug.innerHTML = target.className == 'drag' ? 'draggable element clicked' : 'NON-draggable element clicked';
    // for IE, left click == 1
    // for Firefox, left click == 0
    if (((e.button == 1 && window.event != null) || (e.button == 0)) && target.className == 'drag'){
        // grab the mouse position
        _startX = e.clientX;
        _startY = e.clientY;
        // grab the clicked element's position
        _offsetX = ExtractNumber(target.style.left);
        _offsetY = ExtractNumber(target.style.top);
        // bring the clicked element to the front while it is being dragged
        _oldZIndex = target.style.zIndex;
        target.style.zIndex = 10000;
        // we need to access the element in OnMouseMove
        _dragElement = target;
        // tell our code to start moving the element with the mouse
        document.onmousemove = OnMouseMove;
        // cancel out any text selections
        document.body.focus();
        // prevent text selection in IE
        document.onselectstart = function () { return false; };
        // prevent text selection (except IE)
        return false;
    }
}
function OnMouseMove(e){
    if (!e) {e = window.event; }
    // this is the actual "drag code"
    _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
    _dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
    _debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';    
}
function OnMouseUp(e){
    if (_dragElement != null){
        _dragElement.style.zIndex = _oldZIndex;
        // we're done with these events until the next OnMouseDown
        document.onmousemove = null;
        document.onselectstart = null;
        // this is how we know we're not dragging        
        _dragElement = null;
        _debug.innerHTML = 'mouse up';
    }
}
function $(id){
    return document.getElementById(id);
}
function ExtractNumber(value){
    var n = parseInt(value);
    return n == null || isNaN(n) ? 0 : n;
}
InitDragDrop();
        //-->
</script>
</body>
</html> 

devarticles