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条回答

    报告相同问题?

    悬赏问题

    • ¥20 有关区间dp的问题求解
    • ¥15 多电路系统共用电源的串扰问题
    • ¥15 slam rangenet++配置
    • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
    • ¥15 对于相关问题的求解与代码
    • ¥15 ubuntu子系统密码忘记
    • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
    • ¥15 保护模式-系统加载-段寄存器
    • ¥15 电脑桌面设定一个区域禁止鼠标操作
    • ¥15 求NPF226060磁芯的详细资料