用jquery easyui 做了一个拖拽效果，还用jquery的动画效果做了一个div运动效果，怎么让两者结合
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<style type="text/css">
body{ padding:0px; margin:0px; font-size:12px;}
ul,li{ padding:0px; margin:0px; list-style:none;}
#container{ width:1000px; margin:0px auto;}
.tzk{ height:40px; border:1px solid #000; padding:10px;}
.item{width:100px; height:30px; display:block; float:left; background-color:#996; margin-left:10px;}
.column{border:solid 1px #CCCCCC;background:#FCFCFC;padding:0px;float:left;margin-top:10px; width:1000px;}
.column .tz{height:30px; border-bottom:1px solid #888; margin:10px;}
.tzk h3{ background-color:#69F; color:#fff;cursor:move;}
.drop{ background:#fafafa; width:100px;}
.over{background:#FBEC88;}
.tzk img{ margin-right:10px;}
.mb{ float:left; width:100px; height:30px; border:1px solid #000;}
</style>
<script>
$(function(){
$('.tzk .item').draggable({
revert:true,//true 鼠标放开时候回到原来的位置
proxy:'clone',
onStartDrag:function(){
$(this).css('z-index','9999');
},
onStopDrag:function(){
$(this).css('z-index','0');
}
});
$('.column .tz').droppable({
onDragEnter:function(){
$(this).addClass('over');
},
onDragLeave:function(){
$(this).removeClass('over');
},
onDrop:function(e,source){
$(this).removeClass('over');
var c=$(source).html();
$(this).append("<div class='mb' id='yd'>"+c+"</div>");//可以叠加再加入
}
});
$(".mb").animate({"left":1000+ "px"},2000);
$("#yd").animate({"left":1000+ "px"},5000)
});
/*可以重复运行
$(document).ready(function () {
setInterval("ab()", 2000);
});
function ab() {
alert(1);
}*/
</script>
</head>
<body>
<div id="container">
<div class="tzk" >
<ul><li class="item"><img src="../ttt111/images/yy.jpg" width="100" height="30" /></li>
<li class="item"><img src="../ttt111/images/yy.jpg" width="100" height="30" /></li>
<li class="item"><img src="../ttt111/images/yy.jpg" width="100" height="30" /></li>
<li class="item"><img src="../ttt111/images/yy.jpg" width="100" height="30" /></li>
</ul>
</div>
<div style=" clear:both;">
<div class="column">
<div class="tz"></div><div class="tz"></div>
<div class="tz"></div><div class="tz"></div>
<div class="tz"></div><div class="tz"></div>
</div>
</div>
</div>
<div id="yd" style="position:absolute; left:0px; top:0px; width:50px; height:50px; border:1px solid #000;"></div>
</body>
</html>
想实现拖拽后运动 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<style type="text/css">
body{ padding:0px; margin:0px; font-size:12px;}
ul,li{ padding:0px; margin:0px; list-style:none;}
#container{ width:1000px; margin:0px auto;}
.tzk{ height:40px; border:1px solid #000; padding:10px;}
.item{width:100px; height:30px; display:block; float:left; background-color:#996; margin-left:10px;}
.column{border:solid 1px #CCCCCC;background:#FCFCFC;padding:0px;float:left;margin-top:10px; width:1000px;}
.column .tz{height:30px; border-bottom:1px solid #888; margin:10px;}
.tzk h3{ background-color:#69F; color:#fff;cursor:move;}
.drop{ background:#fafafa; width:100px;}
.over{background:#FBEC88;}
.tzk img{ margin-right:10px;}
.mb{ float:left; width:100px; height:30px; border:1px solid #000;}
</style>
<script>
$(function(){
$('.tzk .item').draggable({
revert:true,//true 鼠标放开时候回到原来的位置
proxy:'clone',
onStartDrag:function(){
$(this).css('z-index','9999');
},
onStopDrag:function(){
$(this).css('z-index','0');
}
});
$('.column .tz').droppable({
onDragEnter:function(){
$(this).addClass('over');
},
onDragLeave:function(){
$(this).removeClass('over');
},
onDrop:function(e,source){
$(this).removeClass('over');
var c=$(source).html();
$(this).append("<div class='mb' id='yd'>"+c+"</div>");//可以叠加再加入
}
});
$(".mb").animate({"left":1000+ "px"},2000);
$("#yd").animate({"left":1000+ "px"},5000)
});
/*可以重复运行
$(document).ready(function () {
setInterval("ab()", 2000);
});
function ab() {
alert(1);
}*/
</script>
</head>
<body>
<div id="container">
<div class="tzk" >
<ul><li class="item"><img src="../ttt111/images/yy.jpg" width="100" height="30" /></li>
<li class="item"><img src="../ttt111/images/yy.jpg" width="100" height="30" /></li>
<li class="item"><img src="../ttt111/images/yy.jpg" width="100" height="30" /></li>
<li class="item"><img src="../ttt111/images/yy.jpg" width="100" height="30" /></li>
</ul>
</div>
<div style=" clear:both;">
<div class="column">
<div class="tz"></div><div class="tz"></div>
<div class="tz"></div><div class="tz"></div>
<div class="tz"></div><div class="tz"></div>
</div>
</div>
</div>
<div id="yd" style="position:absolute; left:0px; top:0px; width:50px; height:50px; border:1px solid #000;"></div>
</body>
</html>
想实现拖拽后运动 展开
展开全部
不如不用ui试试，我的想法是先执行mousedown，然后使鼠标到达的top和left全都存在变量中，之后mouseup然后再用animate执行下div中css变化top和left为变量值，这样就先拖拽再运动了，但是我没试验过，只是个思路
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
兄弟，你也在搞这个啊，前几天我也用jquery easyui玩儿的，不过没做这个效果，帮不了你了！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
