拖拽效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/linsen309/article/details/1632343

本文介绍了一种使用JavaScript实现网页元素拖拽效果的方法。通过监听鼠标事件并计算元素位置，可以使div等HTML元素在页面上自由移动。此外，还提供了一个初始化函数来设置可拖动的元素列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<style>

</style>
<script type="text/javascript">
function $(id){
    return document.getElementById(id);
}
var obj_DragAndDrap = new Object();
obj_DragAndDrap = {
    top:0,
    left:0,
    dragedElement:null,
    z_Index:0,
    draglist:null,
    dragstart:function(e){
        var event = window.event || e;
        if(event.srcElement){
            obj_DragAndDrap.dragedElement = event.srcElement;
        }else{
            obj_DragAndDrap.dragedElement = event.target;
        }
        while(obj_DragAndDrap.tagName != "BODY"){
            if(obj_DragAndDrap.isInArray(obj_DragAndDrap.draglist,obj_DragAndDrap.dragedElement)){
                break;
            }else{
                obj_DragAndDrap.dragedElement = obj_DragAndDrap.dragedElement.parentNode;
            }
        }
        obj_DragAndDrap.dragedElement.style.top = (obj_DragAndDrap.dragedElement.style.top)?obj_DragAndDrap.dragedElement.style.top : 0;
        obj_DragAndDrap.dragedElement.style.left = (obj_DragAndDrap.dragedElement.style.left)?obj_DragAndDrap.dragedElement.style.left : 0;
        obj_DragAndDrap.dragedElement.style.position = "absolute";
        obj_DragAndDrap.top = parseInt(obj_DragAndDrap.dragedElement.style.top) - event.clientY;
        obj_DragAndDrap.left = parseInt(obj_DragAndDrap.dragedElement.style.left) - event.clientX;
        obj_DragAndDrap.dragedElement.style.zIndex = obj_DragAndDrap.z_Index+1;
        obj_DragAndDrap.z_Index++;
        obj_DragAndDrap.dragedElement.onmousemove = obj_DragAndDrap.draging;
        obj_DragAndDrap.dragedElement.onmouseup = obj_DragAndDrap.dragend;
        obj_DragAndDrap.dragedElement.onmouseout = obj_DragAndDrap.dragend;
    },
    draging:function(e){
        var event = window.event || e;
            obj_DragAndDrap.dragedElement.style.top = obj_DragAndDrap.top + event.clientY +"px";
            obj_DragAndDrap.dragedElement.style.left = obj_DragAndDrap.left + event.clientX +"px";
    },
    dragend:function(e){
        obj_DragAndDrap.dragedElement.onmousemove = obj_DragAndDrap.noDrag;
        obj_DragAndDrap.dragedElement.onmouseup = obj_DragAndDrap.noDrag;
        obj_DragAndDrap.dragedElement.onmouseout = obj_DragAndDrap.noDrag;
        obj_DragAndDrap.top = 0;
        obj_DragAndDrap.left = 0;
    },
    draginit:function(draglist){
        try{
            for(var i=0; i<draglist.length;i++){
                draglist[i].onmousedown = obj_DragAndDrap.dragstart;
            }
            obj_DragAndDrap.draglist = draglist;
        }catch(exp){}
    },
    noDrag:function(){
        return false;
    },
    isInArray:function(arr,ele){
        for(var i=0 ; i < arr.length ; i++){
            if(arr[i] == ele){
                return true;
            }
        }
        return false;
    }
}
function pageload(){
    var dragment = document.getElementsByTagName("div");
    var draglist = new Array();
    for(var i=0;i<dragment.length;i++){
            draglist.push(dragment[i]);
    }
    //draglist.push($("image"));
    obj_DragAndDrap.draginit(draglist);
}

</script>
</head>
<body onload="pageload()">
<div id="father1" class="rob" style="left:0px;top:0px">
    <div class="child"></div>
</div>
<div id="father2" class="rob" style="left:200px;top:0px">
    <div class="child"></div>
</div>
<div>
<img id="image" src="http://photo8.yupoo.com/20070504/023058_781786965.jpg" unselectable="on" style="border:0px;" />
</div>
</body>
</html>

js拖拽的例子