使用Jquery实现拖动效果，妖求是user1从A组的用户拖动到另外B组去，拖动之后user1成为B组的用户，同时从B组消失，

在JQuery UI中有一个Draggable和Droppable的方法可以实现这个效果，假如你要记住它的位置，就要涉及到数据的操作，否则就不用。你可以上官网看它的API。
http://jqueryui.com/

改了个Demo给你，你按步骤来吧。
1：将以下css保存为css.css
body{
    background-color:#777777;
    color:#FFFFFF;
    margin:0px;
    padding:18px 0 0 18px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
}
.clear{clear:both;}
.ui-sortable{
    background-color:#FFFFFF;
    border:1px solid #555555;
    color:#222222;
    margin:0 15px 15px 0;
    padding:0 10px 10px;
}
.ui-sortable h2{
     background-color:#555555;
     border-top:3px solid #666666;
     color:#FFFFD0;
     font-size:12px;
     margin:0 -10px 10px;
     line-height:2em;
     padding:0 10px;
}dl.sort{
    color:#222222;
    margin:10px 0px;
}
.dl-sort-placeholder{height:50px;border: 1px dashed red;background: #fbf9ee;color: #363636;}
dl.sort dt{
    background-color:#666666;
    color:#FFFFFF;
    cursor::default;
    height:2em; line-height:2em;
    padding:0px 6px;
    position:relative;
}
dl.sort dd{
    background-color:#FFFFD8;
    margin:0px;
    padding:3px 6px;
    border-bottom:1px dotted #999999;
    border-left:1px dotted #999999;
    border-right:1px dotted #999999;
}span.options{cursor:pointer; position:absolute; }
.ui-sortable h2 span.options{right:8px; top:8px;position:relative;}
dl.sort dt span.options{right:6px; top:5px;}#container{float:left;}
#header{width:638px;}
#content{float:left; width:400px;}
#sidebar{float:left; width:200px;}
#footer{width:638px;}
#trashcan{
    float:left;
    width:150px; height:100px;
    background-color:#CCCCCC;
}
#trashcan p{margin:0px;}
2:将以下HTML保存为：drag.html[当然，别的也行]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>拖拽_demo</title>
  <link href="css.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script language="javascript" src="drag.js"></script>
</head><body id="uidemo">
<button id="edit" onclick="pl.Start()">编辑</button>
<button id="Button1" onclick="pl.Destory()">停止</button>
    <div id="container">
        <div id="header" class="ui-sortable">
            <h2>头版头条</h2>
            <dl class="sort" id="a1">
                <dt>我是 [dl:id=a1]</dt>
                <dd>2222222222222</dd>
                <dd>33333333333333</dd>
            </dl>
        </div>

        <div id="content" class="ui-sortable">
            <h2>详细内容</h2>
            <dl class="sort" id="a2">
                <dt>我是 [dl:id=a2]</dt>
                <dd>555555555555555555555</dd>
                <dd>6666666666666666666</dd>
            </dl>
        </div>

        <div id="sidebar" class="ui-sortable">
            <h2>滚动新闻</h2>
<dl class="sort" id="a7">
                <dt>我是 [dl:id=a7]拖拽记录</dt>
            </dl>
            <dl class="sort" id="a3">
                <dt>我是 [dl:id=a3]</dt>
                <dd>7777777777777</dd>
                <dd>8888888888888</dd>
                <dd>7777777777777</dd>
                <dd>8888888888888</dd>            </dl>
            <dl class="sort" id="a4">
                <dt>我是 [dl:id=a4]</dt>
                <dd>9999999999999</dd>
                <dd>aaaaaaaaaaaaaaa</dd>
            </dl>
            <dl class="sort" id="a5">
                <dt>我是 [dl:id=a5]</dt>
                <dd>bbbbbbbb</dd>
                <dd>cccccccccccc</dd>
            </dl>
        </div>

        <div class="clear"></div>

        <div id="footer" class="ui-sortable">
            <h2>页脚项</h2>
            <dl class="sort" id="a6">
                <dt>我是 [dl:id=a6]</dt>
                <dd>eeeeeeeeeeeee</dd>
            </dl>
        </div>
    </div>

    <div id="trashcan" class="ui-sortable">
        <h2>回收站</h2>
    </div>
</body>
</html>
3:将以下js保存为:drag.jsvar PageLayout=function(){
    this.moveUp = function(){
        //向上移动子项目
        var link = $(this),
        dl = link.parents("dl"),
        prev = dl.prev("dl");
        if(link.is(".up") && prev.length > 0){dl.insertBefore(prev);}

    }
    this.addItem = function(){
        //添加一个子项目
        var sortable = $(this).parents(".ui-sortable");
        var options = '<span class="options"><a class="up"><img src="up.gif" border="0"></a></span>';
        var html = '<dl class="sort"><dt>Dynamic name'+options+'</dt><dd>Description</dd></dl>';
        sortable.append(html).sortable("refresh").find("a.up").bind("click", this.moveUp);

    }
    this.emptyTrashCan = function(o){
        //回收站
        o.remove();
    }

    this.sortableChange = function(e, ui){
        if(ui.sender){
           var w = $(this).width();
            ui.placeholder.width(w);            ui.helper.css("width",$(this).children().width());

        }

    }

    this.sortableUpdate = function(e, ui){
        //更新模块（用户回收站清空后）
        if(this.id == "trashcan"){ui.item.remove();}else{if(ui.sender){$("#a7").append("<dd>[dl:id="+ui.item.attr("id")+"] 被拖入 [div:id="+$(this).attr("id")+"] 容器中</dd>")}}
    }    this.Start=function(){
        //引用主页面中的所有块
        var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan'];
        var $els = $(els.toString());

        //动态添加“增加子项目”、“向上移动”按钮
        //$("h2", $els.slice(0,-1)).append('<span class="options"><a class="add"><img src="add.gif" border="0"></a></span>');//<span class="options"><a class="add"><img src="add.gif" border="0"></a></span>
        $("dt", $els).append('<span class="options" style="padding-right:20px;"><a class="up">向上</a></span>');

        //绑定相关事件
        //$("a.add").bind("click", this.addItem);
        $("a.up").bind("click", this.moveUp);
        $("dt").css("cursor","move");
        //使用jQuery插件
        $els.sortable( 'enable' );
        $els.sortable({
            items: '> dl',    //拖拽对象
            handle: 'dt',    //可触发该事件的对象
            cursor: 'move',    //鼠标样式
            opacity: 0.8,    //拖拽时透明
            appendTo: 'body',
            forcePlaceholderSize:false,
            revert:true,

            tolerance:'pointer',

            placeholder: 'dl-sort-placeholder',
            connectWith: els,
            start: function(e,ui) {
                //ui.helper.css("width","100");
                //ui.helper.css("height","100");
            },
            change: this.sortableChange,
            update: this.sortableUpdate        //用于回收站
        });
    }    this.Destory=function(){
        //引用主页面中的所有块
        var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan'];
        var $els = $(els.toString());
        $els.sortable( 'refresh' );
        $els.sortable( 'disable' );
    }
}
pl=new PageLayout();

汗~~LZ，我上面贴的代码就是这个的实例，特意改的一个Demo......

CryingBoy，你好！我想实现Td间的拖动的呀，你这个拖动仅限于Div之内，所以还是请多多指教呀！

你又说是DIV，又说方法不限
你要拖动的td是同table中拖动还是不同的table中拖动？

这次给你完整代码，你直接复制去运行就是了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>拖拽_demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<style type="text/css">
body{
background-color:#777777;
color:#FFFFFF;
margin:0px;
padding:18px 0 0 18px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
.clear{clear:both;}
.ui-sortable{
background-color:#FFFFFF;
border:1px solid #555555;
color:#222222;
width:90px;
margin:0 15px 15px 0;
padding:0 10px 10px;
}
dl.sort dt{
background-color:#666666;
color:#FFFFFF;
cursor::default;
height:2em; line-height:2em;
padding:0px 6px;
position:relative;
}
dl.sort dd{
background-color:#FFFFD8;
margin:0px;
padding:3px 6px;
border-bottom:1px dotted #999999;
border-left:1px dotted #999999;
border-right:1px dotted #999999;
}
table{width:70px;height:auto;float:left;border:1px solid #bfbfbf;margin:5px;}
tr{width:70px;float:left;}
td{width:70px;float:left;}
.dl-sort-placeholder{height:50px;border: 1px dashed red;background: #fbf9ee;color: #363636;}
#content{float:left; width:90px;}
#sidebar{float:left; width:90px;}
</style>
<script type="text/javascript">var PageLayout=function(){
    this.moveUp = function(){
//向上移动子项目
var link = $(this),
dl = link.parents("dl"),
prev = dl.prev("dl");

if(link.is(".up") && prev.length > 0){dl.insertBefore(prev);}

}
this.addItem = function(){
//添加一个子项目

var sortable = $(this).parents(".ui-sortable");
var options = '<span class="options"><a class="up"><img src="up.gif" border="0"></a></span>';
var html = '<dl class="sort"><dt>Dynamic name'+options+'</dt><dd>Description</dd></dl>';
sortable.append(html).sortable("refresh").find("a.up").bind("click", this.moveUp);

}
this.emptyTrashCan = function(o){
//回收站
o.remove();
}

this.sortableChange = function(e, ui){
if(ui.sender){
var w = $(this).width();
ui.placeholder.width(w);
ui.helper.css("width",$(this).children().width());
}

}

this.sortableUpdate = function(e, ui){

if(this.id == "trashcan"){ui.item.remove();}else{if(ui.sender){$("#a7").append("<dd>[table:id="+ui.item.attr("id")+"] 被拖入 [div:id="+$(this).attr("id")+"] 容器中</dd>")}}
} this.Start=function(){
//引用主页面中的所有块
var els = ['#content', '#sidebar'];
var $els = $(els.toString());
//使用jQuery插件
$els.sortable( 'enable' );
$els.sortable({
items: '> table', //拖拽对象
handle: 'tr', //可触发该事件的对象
cursor: 'move', //鼠标样式
opacity: 0.8, //拖拽时透明
appendTo: 'body',
            forcePlaceholderSize:false,
revert:true,

tolerance:'pointer',

placeholder: 'dl-sort-placeholder',
connectWith: els,
start: function(e,ui) {
},
stop:function (e,ui)
{
},
change: this.sortableChange,
update: this.sortableUpdate //用于回收站
});
} this.Destory=function(){
//引用主页面中的所有块
var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan'];
var $els = $(els.toString());
$els.sortable( 'refresh' );
$els.sortable( 'disable' );
}
}
pl=new PageLayout();
window.onload=function(){
pl.Start();
}
</script>
</head><body id="uidemo">
<button id="Button2" onclick="pl.Start()">允许拖拽</button>
<button id="Button1" onclick="pl.Destory()">禁止拖拽</button>
<div id="container">

<div id="content" class="ui-sortable">
<h2>teams左</h2>
<table id="a1" class="sort">
    <tbody>
        <tr>
            <td>aaaaa</td>
            <td>bbbb</td>
            <td>ccc</td>
            <td>ddd</td>
        </tr>
    </tbody>
    </table>
    <div class="clear"></div>
    <table id="a2" class="sort">
    <tbody>
        <tr>
            <td>eee</td>
            <td>fff</td>
            <td>ggg</td>
            <td>hhh</td>
        </tr>
    </tbody>
    </table>

</div>

<div id="sidebar" class="ui-sortable">
<h2>teams右</h2>
<dl class="sort" id="a7">
<dt>我是拖拽记录</dt>
</dl>
<table id="a3" class="sort">
    <tbody>
        <tr>
            <td>mmmm</td>
            <td>nnnn</td>
            <td>oooo</td>
            <td>pppp</td>
        </tr>
    </tbody>
    </table>

    <table id="a4" class="sort">
    <tbody>
        <tr>
            <td>qqqq</td>
            <td>rrrr</td>
            <td>ssss</td>
            <td>tttt</td>
        </tr>
    </tbody>
    </table>
</div>

<div class="clear"></div>
</div>
</body>
</html>

CryingBoy 你太牛了！非常感激你对我的这么细致的帮助！但是还有一个问题的呀！我是想实现TD之间的拖动，你这次给的代码还是在一个table和table之间的拖动，能否实现td下面嵌入DIV或者神马其他，改善拖动的效果！

唉，我不牛，我是个大菜鸟，再给你整一次吧，给你搞简单点的。前面的我是拿编辑版面的改的，有点罗嗦，这次给你个直接点的吧。不废话了，直接上代码；老样子，直接拿去测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>拖拽_demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<style type="text/css">
body{
    background-color:#777777;
    color:#FFFFFF;
    margin:0px;
    padding:18px 0 0 18px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
}
.clear{clear:both;}
.ui-sortable
{
    float:left;
    background-color:#FFFFFF;
    border:1px solid #555555;
    color:#222222;
    width:180px;
    margin:0 15px 15px 0;
    padding:0 10px 10px;
}
dl.sort dt{
    background-color:#666666;
    color:#FFFFFF;
    cursor::default;
    height:2em; line-height:2em;
    padding:0px 6px;
    position:relative;
}
dl.sort dd{
    background-color:#FFFFD8;
    margin:0px;
    padding:3px 6px;
    border-bottom:1px dotted #999999;
    border-left:1px dotted #999999;
    border-right:1px dotted #999999;
}
table{width:140px;height:auto;float:left;border:1px solid #bfbfbf;margin:5px;}
tr{width:140px;float:left;}
td{width:140px;float:left;}
.dl-sort-placeholder{height:50px;border: 1px dashed red;background: #fbf9ee;color: #363636;}
.cacel{ font-size:12px; font-weight:bold;}
</style>
<script type="text/javascript"> function sortableUpdate (e, ui){

     if(ui.sender){$("#a7").append("<dd>"+ui.item.html()+" 被拖入 [div:id="+$(this).attr("id")+"] 容器中</dd>")}
    }
$(function(){
    $( "table" ).sortable({
            items:'td',//定义被拖动的对象
connectWith: ".sort",//容器外联
cancel: ".cacel",//标有该样式的将无法被拖动
update: sortableUpdate//拖拽状态
}).disableSelection();
})
</script>
</head><body id="uidemo">
    <div id="container">

        <div id="content" class="ui-sortable">
            <h2>teams左</h2>
            <table    id="a1" class="sort">
            <tbody>
                <tr>
                    <td class="cacel">team1[我不能被拖走]</td>
                    <td>aaaaa</td>
                    <td>bbbb</td>
                    <td>ccc</td>
                    <td>ddd</td>
                </tr>
            </tbody>
            </table>
            <div class="clear"></div>
            <table  id="a2" class="sort">
            <tbody>
                <tr>
                    <td class="cacel">team2[我不能被拖走]</td>
                    <td>eee</td>
                    <td>fff</td>
                    <td>ggg</td>
                    <td>hhh</td>
                </tr>
            </tbody>
            </table>

        </div>

        <div id="sidebar" class="ui-sortable">
            <h2>teams右</h2>
            <dl class="sort" id="a7">
                <dt>我是拖拽记录</dt>
            </dl>
            <table  id="a3" class="sort">
            <tbody>
                <tr>
                    <td class="cacel">team3[我不能被拖走]</td>
                    <td>mmmm</td>
                    <td>nnnn</td>
                    <td>oooo</td>
                    <td>pppp</td>
                </tr>
            </tbody>
            </table>

            <table    id="a4" class="sort">
            <tbody>
                <tr>
                    <td class="cacel">team4[我不能被拖走]</td>
                    <td>qqqq</td>
                    <td>rrrr</td>
                    <td>ssss</td>
                    <td>tttt</td>
                </tr>
            </tbody>
            </table>
        </div>

        <div class="clear"></div>
    </div>
</body>
</html>

js改成以下的吧，让那个拖动选择效果更明显一点的
<script type="text/javascript"> function sortableUpdate (e, ui){

     if(ui.sender){$("#a7").append("<dd>"+ui.item.html()+" 被拖入 [div:id="+$(this).attr("id")+"] 容器中</dd>")}
    }
$(function(){
    $( "table" ).sortable({
        items:'td',//定义被拖动的对象
        connectWith: ".sort",//容器外联
        cancel: ".cacel",//标有该样式的将无法被拖动
        cursor: 'move',    //鼠标样式
        opacity: 0.8,    //拖拽时透明
        forcePlaceholderSize:false,
        revert:true,
        tolerance:'pointer',
        placeholder: 'dl-sort-placeholder',
        update: sortableUpdate//拖拽状态
    }).disableSelection();
})
</script>

Crying_Boy，真心感谢你的具体详细的指导呀，这个里面的拖动的效果需要Dropdownlist，就是每一个细小的可以拖动的元素可以在dropdownlist之间进行拖动，请指教！谢谢！

对了，这个地方的也不一定是dropdownlist的，是一种可以拖动的，可编辑的带下拉列表（类似模糊查询）的TextBox这样子的。很类似dropdownlist，但又不是.Crying_boy，请多多指教！

你先是说：拖动一般通过DIV来实现。这次实现的方法不限。好吧，我给你整了个小例子
后又说：要td之间的。好嘛，我又简化着再给你做了个小例子之所以给你做例子，我无非是想着初学的时候，有个效果参考着看，参考着学总是好的。谁没有经过初学的阶段呀，搞不了,又不知道从何下手是件很郁闷的事。可我给你做了两个小例子了，你又来要求什么Dropdownlist。我明白了，你不是来学东西的，你是来拿东西的我回答你的问题，分数是次要的，主要的是一来可以帮到人，二来可以让自己印象加深。一举两得的事而已朋友，奉劝你一句，学习是要有态度的点下面的链接自己去看吧
jquery sortable详解

呵呵，谢谢Crying_Boy，我这边是有些急！对于你的反馈我很感谢！结贴！

调试易

使用Jquery实现拖动效果，妖求是user1从A组的用户拖动到另外B组去，拖动之后user1成为B组的用户，同时从B组消失，

解决方案 »