如何用javascript实现这么一个功能？

前几天看到别人的代码, 应该适合你<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<img id="img" /><br />
<img id="img1" /><br />
<input type="button" onclick="createTeam()" value="绑定2张图片" /><br /><script type="text/javascript">
window.dragingObj = null; // 存放拖放的对象
/**
* 鼠标放开时清空对象
*/
document.onmousemove = function(evt){
    if(dragingObj != null){
        evt = evt ? evt : (window.event ? window.event : null);
        if(typeof(lastX) == "undefined" || lastX == null){ // 如果是第一次拖动则先保存最后的鼠标坐标
            lastX = evt.screenX;
            lastY = evt.screenY;
            return;
        }
        // 保存移动量
        var x = evt.screenX - lastX;
        var y = evt.screenY - lastY;
        // 保存最后一次拖动的坐标
        lastX = evt.screenX;
        lastY = evt.screenY;
        dragingObj.move(x, y); // 根据移动量移动对象
    }
}/**
* 鼠标放开时清空对象
*/
document.onmouseup = function(){
    dragingObj = null;
    lastX = null;
}/**
* 初始化对象
*/
function DragTag(obj){
    obj.style.position = "absolute";
    if(obj.style.top == "")obj.style.top = "0px";
    if(obj.style.left == "")obj.style.left = "0px";
    obj.group = null; // 是拖动单个对象还是拖动组标志

  // 模拟对象移动(每个对象都有一个移动的方法)
    obj.move = function(x, y){
        this.style.top = parseInt(this.style.top)+y+"px";
        this.style.left = parseInt(this.style.left)+x+"px";
    }

    // 鼠标按下时保存拖动对象
    obj.onmousedown = function(){
        if(this.group == null){ // 如果是单个对象
            dragingObj = this;
        }else{ // 如果是组合
            dragingObj = this.group;
        }
    }
}
/**
* 组管理函数
*/
function DragGroup(){
    this.members = []; // 组各对象保存在一个数组里面
    this.move = function(x, y){ // 组的移动方法
        for(var i = 0; i < this.members.length; i++){
            this.members[i].move(x, y);
        }
    }
    this.add = function(item){ // 组添加对象
        this.members.push(item);
        item.group = this; // 设置对象组标志位
    }
}/**
* 页面加载完毕
*/
window.onload = function(){
        var img1 = document.getElementById("img");
        var img2 = document.getElementById("img1");
        DragTag(img1);
        DragTag(img2);
    }
    // 创建组
    function createTeam(){
        var g = new DragGroup();
        g.add(document.getElementById("img"));
        g.add(document.getElementById("img1"));
    }
</script></BODY>
</HTML>

要组合时按住ctrl键,然后选择要组合的对象,可以组合n个对象.就如windows的桌面图标一样,只是没实现shift的一次选取多个对象,只能用ctrl键一次次组合

你那个是可以，但要求不是那样，重点不是移动，CTRL是能选取多个对象，那样还是多个对象，没组合成一个，你移动完后他还是两个对象，先成一个对象，然后移动，移动完后还是一个对象，大哥麻烦你再想想办法

有点象用js做个一个拼图游戏
假如现在 4张散图
1和2拼好就粘在一起移动的时候 1和2 相对位置不变就ok了
这里提供一个思路
将各自对象编号
移动原对象然后粘到目标对象上
粘完后给目标对象 clone一个段代码表示原对象
而真正的原对象隐藏
给外人感觉是粘一起了目标对象就可以合并一起来移动
我象也比较好实现
希望有点帮助.

有点象用js做个一个拼图游戏
假如现在 4张散图
1和2拼好就粘在一起移动的时候 1和2 相对位置不变就ok了
就是大哥这意思，具体怎么实现呢？

首先是你原对象用js定义好动态代码或者 getbyid 也可以
然后是定义一个目标对象只用一个空的 <div id="aa"></div>
即可然后是移动功能你自己找了网上很多现在说移动到位后粘贴就用innerhtml方法 clone 原对象
比如 aa.innerhtml="<img src=....>" 就是在相当于目标对象成了<div id="aa"><img src=....></div>
为了表示智能原对象在靠近目标对象一定范围内就自己吸引上去
具体要怎么排啊比如左对齐上对齐什么的在innerhtml之前就要先处理好出来完成就用innerhtml当然也可以用目标对象去粘原对象反正就累加就行了

http://blog.csdn.net/chinmo/archive/2008/03/04/2145295.aspx
你说的是这个吗？

http://blog.csdn.net/chinmo/archive/2008/03/04/2145295.aspx
你说的是这个吗？你看看是不是这个

<html><head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>fsadfas</title><script>
function clone1(objs)
{
//在这里我没使用innerhtml 那也可以实现情况类似
//这个是在你移动到位后调用这个函数目的是将移动对象复制为另一个对象然后隐藏原对象
// 你自己保留其需要的属性我们现在保留其长宽和颜色
//其他有关如何排列的问题就多添加属性设置就ok了

var str = document.createElement("div"); //创建一个新标签
str1=document.getElementById(objs);

objddd=document.getElementById("ddd"); //目标对象

str.style.setAttribute("width",str1.style.getAttribute("width"));
str.style.setAttribute("height",str1.style.getAttribute("height"));
str.style.setAttribute("border","1   solid   #000000");
str.style.setAttribute("backgroundColor",str1.style.getAttribute("backgroundColor"));    str1.style.setAttribute("display","none");
objddd.appendChild(str); //把原对象附属给目标对象
//之后你可以把 objddd 当作一个整体对象进行操作}
</script>
</head><body><div id=aaa style="width: 163; height: 144;background:#ddd;position: absolute; top: 0; left: 0;">The Obj A.</div>
<div id=bbb style="width: 163; height: 144;background:#e97;position: absolute; top: 0; left: 200;">The Obj B</div>
<div id=ccc style="width: 163; height: 144;background:#97b;position: absolute; top: 0; left: 400;">The Obj C</div>
<br><br><br><br><br><br><br>
<button name="onclick" onclick=clone1("aaa");clone1("bbb");clone1("ccc");>点击我</button><div id=ddd style="top:500; left: 1000;">The Obj D</div></body></html>

谢谢silence2k了，先给你这60分，现在就还有50分了，加不了分，回头有分了，我再随便开个帖子，你来我再给你100分

好了你要的加强功能帮你实现了
有分了记得加分呵呵
对象相加成组
组＋1个对象成组
组加组成组<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
window.dragingObj = null; // 存放拖放的对象
/**
* 鼠标放开时清空对象
*/
document.onmousemove = function(evt){
    if(dragingObj != null){
        evt = evt ? evt : (window.event ? window.event : null);
        if(typeof(lastX) == "undefined" || lastX == null){ // 如果是第一次拖动则先保存最后的鼠标坐标
            lastX = evt.screenX;
            lastY = evt.screenY;
            return;
        }
        // 保存移动量
        var x = evt.screenX - lastX;
        var y = evt.screenY - lastY;
        // 保存最后一次拖动的坐标
        lastX = evt.screenX;
        lastY = evt.screenY;
        dragingObj.move(x, y); // 根据移动量移动对象
    }
}/**
* 鼠标放开时清空对象
*/
document.onmouseup = function(){
    dragingObj = null;
    lastX = null;
}/**
* 初始化对象
*/
function DragTag(obj){
    obj.style.position = "absolute";
    if(obj.style.top == "")obj.style.top = "0px";
    if(obj.style.left == "")obj.style.left = "0px";
    obj.group = null; // 是拖动单个对象还是拖动组标志

  // 模拟对象移动(每个对象都有一个移动的方法)
    obj.move = function(x, y){
        this.style.top = parseInt(this.style.top)+y+"px";
        this.style.left = parseInt(this.style.left)+x+"px";
    }

    // 鼠标按下时保存拖动对象
    obj.onmousedown = function(){
        if(this.group == null){ // 如果是单个对象
            dragingObj = this;
        }else{ // 如果是组合
            dragingObj = this.group;
        }
    }
}
/**
* 组管理函数
*/
function DragGroup(){
    this.members = []; // 组各对象保存在一个数组里面
    this.move = function(x, y){ // 组的移动方法
        for(var i = 0; i < this.members.length; i++){
            this.members[i].move(x, y);
        }
    }
    this.add = function(item){ // 组添加对象
        this.members.push(item);
        item.group = this; // 设置对象组标志位
    }
}/**
* 页面加载完毕
*/
window.onload = function(){
//这里是初始化如果不能确定你有多少个可移动的对象或者要移动的太多就把要移动的对象编号做好规律用遍历的方法加载
        var img1 = document.getElementById("obj1");
        var img2 = document.getElementById("obj2");
        var img3 = document.getElementById("obj3");
        var img4 = document.getElementById("obj4");
        var img5 = document.getElementById("obj5");
        var img6 = document.getElementById("obj6");
        DragTag(img1);
        DragTag(img2);
         DragTag(img3);
        DragTag(img4);
        DragTag(img5);
         DragTag(img6);
        initTeam();
    }    // 改写的创建组 : 若要动态创建组是使用不定参数第一个参数为组对象标志后面是你想添加的想几个就几个用逗号分开
    function createTeam1(){
     for(i=1;i<arguments.length;i++)
         arguments[0].add(document.getElementById(arguments[i]));
    }
        //  创建组对象
   var g,f;
    function initTeam(){
        g = new DragGroup();
        f = new DragGroup();
    }
    function Add2Team(e,id){
        e.add(document.getElementById(id));
    }

    function Group2Group(k,n){
    for(var i = 0; i < n.members.length; i++){
     k.add(n.members[i]);
     }
    }</script></HEAD><BODY><div style="position: absolute; top: 0; left: 0; width: 75; height: 71;background:#e50" id=obj1>obj1<br></div>
<div style="position: absolute; top: 30; left: 130; width: 75; height: 71;background:#f90" id=obj2>obj2<br></div>
<div style="position: absolute; top: 20; left: 300; width: 75; height: 71;background:#8df" id=obj3>obj3<br></div>
<br>
<br>
<br>
<br>
<br>
<div style="position: absolute; top: 53; left: 480; width: 75; height: 71;background:#DDD" id=obj4>obj4<br></div>
<div style="position: absolute; top: 177; left: 554; width: 75; height: 71;background:#789" id=obj5>obj5<br></div>
<div style="position: absolute; top: 233; left: 428; width: 75; height: 71;background:#869" id=obj6>obj6<br></div>
<br>
<br>
 <input type="button" onclick="createTeam1(g,'obj1','obj2')" value="创建第一组 1,2" /> <input type="button" onclick="Add2Team(g,'obj3')" value="绑定第三个" /><BR><BR><BR><BR>
<input type="button" onclick="createTeam1(f,'obj4','obj5','obj6')" value="创建第二组 4,5,6" /><BR><BR><BR><BR>
<input type="button" onclick="Group2Group(g,f)" value="二组相加" />
</BODY>
</HTML>

先说声对不起
我无法进入论坛，所以只好在这里向大家请教一下了：
各位高人：小弟是一位即将毕业学生，所在学校也不好，现在正在为工作发愁，实训的期间接触到javascript,对他很感兴趣，请各位指点一下，如何学好javascript，在帮忙推荐几本不错的书籍！谢谢了！另问一下：javascript中的prompt那个框框的属性都是有哪些？从网上得知，是没有办法去掉它上面的那个“脚本提示”的，但怎么设置它显示的位置，我每次用它，他都是出现在屏幕的左上角，网上看到别人都是说用什么模拟框来代替它，具体怎么实现，谢谢大家了另：我没有分，我刚刚进来，以后又分了给大家加，怎么样？多谢各位了！！！

调试易

如何用javascript实现这么一个功能？

解决方案 »