draggable可拖动,可装入购物车用插件draggable

<script language="javascript" src="jquery.ui/jquery-1.2.4a.js"></script>
<script language="javascript" src="jquery.ui/ui.base.min.js"></script>
<script language="javascript" src="jquery.ui/ui.draggable.min.js"></script>
<script language="javascript" src="jquery.ui/ui.droppable.min.js"></script>
$(function(){
 $(".draggable").draggable({helper:"clone"});//采用clone方式复制拖拽
 $("#droppable-accept").droppable({
  accept: function(draggable){
   //接收类别为green的
   return $(draggable).hasClass("green");
  },
  drop: function(){
   $(this).append($("<div></div>").html("drop!"));
  }
 });
});
<body>
<div class="draggable red">draggable red</div>
<div class="draggable green">draggable green</div>
<div id="droppable-accept" class="droppable">droppable<br></div>
</body>

posted on 2012-05-17 15:17 youngturk 阅读(676) 评论(0)  编辑  收藏 所属分类: JQuery


只有注册用户登录后才能发表评论。


网站导航:
 
<2012年5月>
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

导航

统计

公告

this year :
1 jQuery
2 freemarker
3 框架结构
4 口语英语

常用链接

留言簿(6)

随笔分类

随笔档案

文章分类

文章档案

相册

EJB学习

Flex学习

learn English

oracle

spring MVC web service

SQL

Struts

生活保健

解析文件

搜索

最新评论

阅读排行榜

评论排行榜