一个使用js脚本实现拖放传数据的例子

最新推荐文章于 2023-11-28 11:58:47 发布

hyjzcy

最新推荐文章于 2023-11-28 11:58:47 发布

阅读量786

点赞数

文章标签：脚本 function null class div html

js脚本知识应用专栏收录该内容

3 篇文章

订阅专栏

js代码
-------------------------------------------------------------------------
function DragDrop(args){ /* 初始化参数 args={ obj,moveText,dragStart,dragEnd,target,btouch,touch } */ //拖动时说明，未指定时为空 args.moveText=args.moveText||""; if(!args.obj)return; if(!args.target)return; isIE=document.all; var obj=args.obj; obj.style.cursor="move"; obj.onmousedown=function(e){//将要拖动 if(!document.all)e.preventDefault(); document.body.style.cursor='default'; if(args.dragStart){args.dragStart(this);} var opos=getObjPos(this); var cpos = getCurPos(e); this.moveFlag=true; var md=document.createElement("div"); document.body.appendChild(md); this.md=md; with(md.style){//拖动时说明样式 position="absolute"; border="1px solid #f00"; background="transparent"; fontSize="9pt"; md.innerHTML=args.moveText; height=(this.offsetHeight-(isIE?2:2))+"px"; if(args.moveText=="") width=(this.offsetWidth-(isIE?0:2))+"px"; top=cpos.y-parseInt(md.offsetHeight); left=cpos.x-parseInt(md.offsetWidth)/2; } obj.target=null; tas=args.target; ts=new Array(); tas.length?ts=tas:ts[0]=tas; tsc=ts.length; obj.docMmove=document.onmousemove; document.onmousemove=function(e){//开始拖动 if(!obj.moveFlag)return false; document.body.style.cursor='default'; var Pos = getCurPos(e); obj.target=null; var nmd=obj.md; nmd.style.left = Pos.x-parseInt(nmd.offsetWidth)/2+'px'; nmd.style.top = Pos.y-parseInt(nmd.offsetHeight)+'px'; if(args.btouch) for(i=0;i<tsc;i++){ args.btouch(ts[i]); } for(i=tsc-1;i>=0;i--){ if(checkTouch(nmd,ts[i])&&args.touch){ obj.target=ts[i]; args.touch(obj); break; } } return false; }; obj.docContextMenu=document.oncontextmenu; document.oncontextmenu=function(){ return false; }; obj.docMup=document.onmouseup; document.onmouseup=function(e){//结束拖动 obj.moveFlag=false; document.body.style.cursor='auto'; if(obj.md)document.body.removeChild(obj.md); if(obj.onmouseup)obj.onmouseup(); if(args.dragEnd&&obj.target){ args.btouch(obj.target); args.dragEnd(obj); obj.target=null; } setTimeout(function(){//还原借用事件 document.onmouseup=obj.docMup; obj.docMup=null; document.oncontextmenu=obj.docContextMenu; obj.docContextMenu=null; document.onmousemove=obj.docMmove; obj.docMmove=null; },10); }; }; //检查两个DIV是否有接触 function checkTouch(o1,o2){ p1=getObjPos(o1); p2=getObjPos(o2); x1=p1.x;y1=p1.y; x2=p2.x;y2=p2.y; w1=o1.offsetWidth; h1=o1.offsetHeight; w2=o2.offsetWidth; h2=o2.offsetHeight; return ((x1-x2<=0)&&(x2-x1<w1)||(x1-x2>=0)&&(x1-x2<w2))&& ((y1-y2<=0)&&(y2-y1<h1)||(y1-y2>=0)&&(y1-y2<h2)); }; //得到元素的左上角绝对坐标 function getObjPos(o){ var x=y=0; if(o.getBoundingClientRect){ var box=o.getBoundingClientRect(); var D=document.documentElement; x=box.left+Math.max(D.scrollLeft,document.body.scrollLeft)-D.clientLeft; y=box.top+Math.max(D.scrollTop,document.body.scrollTop)-D.clientTop; } else { for(;o!=document.body;x+=o.offsetLeft,y+=o.offsetTop,o=o.offsetParent); } return {'x':x, 'y':y}; }; //得到鼠标绝对坐标 function getCurPos(e){ e=e||window.event; var D=document.documentElement; if (e.pageX) return {x:e.pageX,y:e.pageY}; return { x:e.clientX+D.scrollLeft-D.clientLeft, y:e.clientY+D.scrollTop-D.clientTop }; };}

html代码

------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="dragdrop.js"></script>
<style>
.item{width:50px;height:20px;border:1px solid #000;background:#ccc;}
#items{margin-top:100px;position:absolute;top:5px;left:5px;width:100px;height:100px;border:1px solid #000;}
#target,#target2,#target3,#target4{position:absolute;width:100px;height:100px;border:1px solid #000;}
#target{top:100px;left:300px;}
#target2{top:150px;left:350px;}
#target3{top:100px;left:430px;}
#target4{top:30px;left:360px;}
</style>
</HEAD>

<BODY>
说明：可将左侧框内的黑框拖到右侧四个框之一，也可以将它们拖回来。
<div id="items">
<div class="item">s1</div>
<div class="item">s2</div>
<div class="item">s3</div>
<div class="item">s4</div>
</div>

<div id="targets">
<div id="target"></div>
<div id="target2"></div>
<div id="target3"></div>
<div id="target4"></div>
</div>

<script>
d=document.getElementById("items").getElementsByTagName("div");
c=d.length;
for(i=0;i<c;i++){
    d[i].onmouseup=function(){
        this.style.background='#ccc';
    }
    drag(d[i]);//初始化
}
function drag(oo){
    DragDrop({
        obj:oo,//拖动元素
        
        moveText:'将'+oo.innerHTML+'拖至右侧框',//拖动时说明
        
        //开始拖动执行方法，o为拖动元素
        dragStart: function(o){
            o.style.background='#f00';
        },

        //成功结束拖放时执行方法，o为拖动元素，o.target为目标元素
        //在这里可以进行自己的业务运算，进行数据交换等
        dragEnd: function(o){
            o.target.appendChild(o);
            back(o);
        },
        
        //目标元素，可为数组
        target:document.getElementById("targets").getElementsByTagName("div"),
        
        //拖动元素与目标未接触时，目标执行方法，t为目标对象, 可用来还原接触后的样式
        btouch:function(t){fbtouch(t)},
        
        //拖动元素与目标接触时，执行方法, o为拖动元素，
        //o.target指向目标元素,可用来设置接触后的样式
        touch:function(o){ftouch(o)}
    });
}
function back(oo){
    DragDrop({
        obj:oo,
        moveText:'将'+oo.innerHTML+'拖回',
        dragStart: function(o){
            o.style.background='#f00';
        },
        dragEnd: function(o){
            o.target.appendChild(o);
            drag(o);
        },
        target:document.getElementById("items"),
        btouch:function(t){fbtouch(t)},
        touch:function(o){ftouch(o)}
    });
}
function fbtouch(t){
    t.style.border="1px solid black";
}
function ftouch(o){
    o.target.style.border="2px solid red";
}
</script>
</BODY>
</HTML>