实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Example</title>
    <script type="text/javascript" src="/upload/files/201702/EventUtil.js"></script>
    <script type="text/javascript" src="/upload/files/201702/EventTarget.js"></script>
</head>
<body>
    <div id="status"></div>
    <div id="myDiv1" class="draggable" style="top:100px;left:0px;background:red;width:100px;height:100px;position:absolute"></div>
    <div id="myDiv2" class="draggable" style="background:blue;width:100px;height:100px;position:absolute;top:100px;left:100px"></div>
    <script type="text/javascript">

var DragDrop = function(){
        
            var dragdrop = new EventTarget(),
                dragging = null,
                diffX = 0,
                diffY = 0;
            
            function handleEvent(event){
            
                //get event and target
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);            
            
                //determine the type of event
                switch(event.type){
                    case "mousedown":
                        if (target.className.indexOf("draggable") > -1){
                            dragging = target;
                            diffX = event.clientX - target.offsetLeft;
                            diffY = event.clientY - target.offsetTop;
                            dragdrop.fire({type:"dragstart", target: dragging, x: event.clientX, y: event.clientY});
                        }                     
                        break;
                        
                    case "mousemove":
                        if (dragging !== null){
                            
                            //assign location
                            dragging.style.left = (event.clientX - diffX) + "px";
                            dragging.style.top = (event.clientY - diffY) + "px";

//fire custom event
                            dragdrop.fire({type:"drag", target: dragging, x: event.clientX, y: event.clientY});
                        }                    
                        break;
                        
                    case "mouseup":
                        dragdrop.fire({type:"dragend", target: dragging, x: event.clientX, y: event.clientY});
                        dragging = null;
                        break;
                }
            };
            
            //public interface
            dragdrop.enable = function(){
                    EventUtil.addHandler(document, "mousedown", handleEvent);
                    EventUtil.addHandler(document, "mousemove", handleEvent);
                    EventUtil.addHandler(document, "mouseup", handleEvent);
            };
                
            dragdrop.disable = function(){
                    EventUtil.removeHandler(document, "mousedown", handleEvent);
                    EventUtil.removeHandler(document, "mousemove", handleEvent);
                    EventUtil.removeHandler(document, "mouseup", handleEvent);
            };
            
            return dragdrop;
        }();
        
        DragDrop.enable();
                        
        DragDrop.addHandler("dragstart", function(event){
            var status = document.getElementById("status");
            status.innerHTML = "Started dragging " + event.target.id;
        });
        
        DragDrop.addHandler("drag", function(event){
            var status = document.getElementById("status");
            status.innerHTML += "<br>Dragged " + event.target.id + " to (" + event.x + "," + event.y + ")";
        });
        
        DragDrop.addHandler("dragend", function(event){
            var status = document.getElementById("status");
            status.innerHTML += "<br>Dropped " + event.target.id + " at (" + event.x + "," + event.y + ")";
        });
        
    </script>
</body>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Example</title>
    <script type="text/javascript" src="/upload/files/201702/EventUtil.js"></script>
    <script type="text/javascript" src="/upload/files/201702/EventTarget.js"></script>
</head>
<body>
    <div id="status"></div>
    <div id="myDiv1" class="draggable" style="top:100px;left:0px;background:red;width:100px;height:100px;position:absolute"></div>
    <div id="myDiv2" class="draggable" style="background:blue;width:100px;height:100px;position:absolute;top:100px;left:100px"></div>
    <script type="text/javascript">
​
        var DragDrop = function(){
        
            var dragdrop = new EventTarget(),
                dragging = null,
                diffX = 0,
                diffY = 0;
            
            function handleEvent(event){
            