支持多浏览器的js拖拽 (转domkey0303 的blog)

只要将想拖拽的对象加到一个数组里，然后调用obj_DragAndDrap.draginit(Array)及可。

<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>

转载于:https://www.cnblogs.com/Fly-sky/archive/2008/09/11/1289051.html

支持多浏览器的js拖拽 (转domkey0303 的blog)相关推荐

收藏个支持进度条与文件拖拽上传的js File Uploader
File Uploader:支持进度显示与文件拖拽的多文件上传前端JS脚本分类: JavaScript 2012-03-11 19:20 2028人阅读评论(11) 收藏举报目录(?)[+] ...
js拖拽图片到浏览器上传
拖拽的事件有很多,这个懂的都懂不懂的就- <!doctype html> <html> <head> <meta charset="utf-8&qu ...
html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
使用js拖拽盒子移动（）
使用js拖拽盒子移动所用到的方法有onmousemove , onmouseup , onmousedown 按下鼠标开始拖拽,松下及停止此方法用函数实现 <!DOCTYPE html> ...
js拖拽库——Sortable.js
Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中.不依赖jQuery.支持 Meteor.AngularJS.React.Vue.K ...
基于layui.upload.js 拖拽文件/文件夹上传下载
layui.upload.js 拖拽文件/文件夹上传下载前言 js代码页面使用(我这里用的是uploader.jsp) CSS文件上传效果总结前言项目需求完成文件上传,可以拖拽上传文件/文 ...
js拖拽360桌面悬浮球代码
js拖拽360桌面悬浮球代码原生js制作简单好用的360桌面悬浮球,可拖拽到浏览器边缘,自动贴边,自动适应屏幕效果. 演示地址下载地址
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
【组件】前端js拖拽插件 VUE
[组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...
sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...

支持多浏览器的js拖拽 (转domkey0303 的blog)

支持多浏览器的js拖拽 (转domkey0303 的blog)相关推荐

最新文章

热门文章