dwa4821 2016-05-27 07:03 采纳率: 71.4%
浏览 1446

js 代码功能是按下左键拖动div,并且拖动时,div不动,产生一个新的div

接在题目后:新的div被拖动,放开左键,新的div消失,原div出现在要拖动到的位置

原来是一开始创建一个新的div,隐藏他,按下左键时,显示他。
我现在想在按下左键时才创建新的div,松开时,去除他。

 <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div>不是获取我</div>
<div id="_this">
<span>
    来获取我的内容
    </span>
</div>
<div id="_that">
    <span>
    第三个div
    </span>
</div>
</body>
<script>
var a = false;
var offset;
var offset2;
//第二个div
var b=document.getElementById('_this');
b.style.width='200px';
b.style.height='200px';
b.style.position='absolute';
b.style.backgroundColor="#666";
b.style.cssFloat='left';
//第二个div中的span
var spa=b.getElementsByTagName('span');
var spa0=spa.item(0);
spa0.style.width='200px';
spa0.style.height='30px';
spa0.style.backgroundColor="red";
spa0.style.display='inline-block';

//第三个div
var div3=document.getElementById('_that');
div3.style.width='200px';
div3.style.height='200px';
div3.style.position='absolute';
div3.style.backgroundColor="#666";
div3.style.cssFloat='left';
div3.style.left='500px';

//第三个div中的span
var div3_spa=div3.getElementsByTagName('span');
var div3_spa0=div3_spa.item(0);
div3_spa0.style.width='200px';
div3_spa0.style.height='30px';
div3_spa0.style.backgroundColor="red";
div3_spa0.style.display='inline-block';

//接收虚框
var ChangeAll;
    window.divChange=document.createElement('div');
    divChange.setAttribute('id','Change');
    divChange.style.border='1px black solid';
    divChange.style.width='200px';
    divChange.style.height='200px';
    divChange.style.position='absolute';
    document.body.appendChild(divChange);
    ChangeAll=document.getElementById('Change');
    ChangeAll.style.display='none';

div3_spa0.onmousedown=mouseDown;
spa0.onmousedown=mouseDown;
function mouseDown(event){
    //虚框
    ChangeAll.style.display='inline-block';
    a = true;
    window.id=this.parentElement;
    offset = {
        x:event.pageX-id.offsetLeft,
        y:event.pageY-id.offsetTop
    }
    ChangeAll.onmousedown=function mouseDown2(event){       
        offset2={
            x:event.pageX-Change.offsetLeft,
            y:event.pageY-Change.offsetTop
        }       
    }

}
ChangeAll.onmouseup=function(event){
        a=false;
        var d= event.pageX;
        var e=event.pageY;
        id.style.left=(d-offset.x)+"px";
        id.style.top=(e-offset.y)+"px";
        ChangeAll.style.display='none';
}
window.onmousemove=function(event){
        if (!a)
            return;
        var d= event.pageX;
        var e=event.pageY;
        Change.style.left=(d-offset.x)+"px";
        Change.style.top=(e-offset.y)+"px";
}
</script>
</html>
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 树莓派与pix飞控通信
    • ¥15 自动转发微信群信息到另外一个微信群
    • ¥15 outlook无法配置成功
    • ¥30 这是哪个作者做的宝宝起名网站
    • ¥60 版本过低apk如何修改可以兼容新的安卓系统
    • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
    • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
    • ¥50 有数据,怎么用matlab求全要素生产率
    • ¥15 TI的insta-spin例程
    • ¥15 完成下列问题完成下列问题