使用Jquery实现拖动效果，妖求是user1从A组的用户拖动到另外B组去，拖动之后user1成为B组的用户，同时从B组消失，
详情：拖动一般通过DIV来实现。这次实现的方法不限，最好是非商业版的授权插件，能够有源码进行改造学习。
（1）左边的布局有两个teams，teams中含有若干用户（最少一个），右边也有teams（同），左边team整体拖动到右边。加入进去，左边的team消失，右边的team增加。
（2）问题 是否涉及对数据库的操作，是否涉及到控件的注册，请大家给出建议！
谢谢！
[解决办法]
在JQuery UI中有一个Draggable和Droppable的方法可以实现这个效果，假如你要记住它的位置，就要涉及到数据的操作，否则就不用。你可以上官网看它的API。
http://jqueryui.com/
[解决办法]
<!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>
[解决办法]
<!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>
[解决办法]
你先是说：拖动一般通过DIV来实现。这次实现的方法不限。好吧，我给你整了个小例子
后又说：要td之间的。好嘛，我又简化着再给你做了个小例子
之所以给你做例子，我无非是想着初学的时候，有个效果参考着看，参考着学总是好的。谁没有经过初学的阶段呀，搞不了,又不知道从何下手是件很郁闷的事。可我给你做了两个小例子了，你又来要求什么Dropdownlist。我明白了，你不是来学东西的，你是来拿东西的
我回答你的问题，分数是次要的，主要的是一来可以帮到人，二来可以让自己印象加深。一举两得的事而已
朋友，奉劝你一句，学习是要有态度的
点下面的链接自己去看吧
jquery sortable详解