运用Jquery实现拖动效果，妖求是user1从A组的用户拖动到另外B组去，拖动之后user1成为B组的用户，同时从B组消失
日期：2014-05-16 浏览次数：20423 次
使用Jquery实现拖动效果，妖求是user1从A组的用户拖动到另外B组去，拖动之后user1成为B组的用户，同时从B组消失，
详情：拖动一般通过DIV来实现。这次实现的方法不限，最好是非商业版的授权插件，能够有源码进行改造学习。
（1）左边的布局有两个teams，teams中含有若干用户（最少一个），右边也有teams（同），左边team整体拖动到右边。加入进去，左边的team消失，右边的team增加。
（2）问题 是否涉及对数据库的操作，是否涉及到控件的注册，请大家给出建议！
谢谢！
------解决方案--------------------
在JQuery UI中有一个Draggable和Droppable的方法可以实现这个效果，假如你要记住它的位置，就要涉及到数据的操作，否则就不用。你可以上官网看它的API。
http://jqueryui.com/
------解决方案--------------------
------解决方案--------------------
------解决方案--------------------
这次给你完整代码，你直接复制去运行就是了
详情：拖动一般通过DIV来实现。这次实现的方法不限，最好是非商业版的授权插件，能够有源码进行改造学习。
（1）左边的布局有两个teams，teams中含有若干用户（最少一个），右边也有teams（同），左边team整体拖动到右边。加入进去，左边的team消失，右边的team增加。
（2）问题 是否涉及对数据库的操作，是否涉及到控件的注册，请大家给出建议！
谢谢！
------解决方案--------------------
在JQuery UI中有一个Draggable和Droppable的方法可以实现这个效果，假如你要记住它的位置，就要涉及到数据的操作，否则就不用。你可以上官网看它的API。
http://jqueryui.com/
------解决方案--------------------
------解决方案--------------------
------解决方案--------------------
这次给你完整代码，你直接复制去运行就是了
- HTML code
<!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.sorta
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
