您的位置：首页 > Web前端 > JQuery

jquery.ui初探__基于draggable()和droppable()的鼠标拖动选择器

2008-11-09 19:16 946 查看

今天下午一直在研究jquery ui，做了一个类似复选框功能的鼠标拖动选择器，主要功能如下面图中所示，相关的代码在最后，如果想看效果，只要将下面横线内的代码黏贴到记事本中，保存为html格式，然后用浏览器打开就好了：

图1.初始的页面效果，可以将绿色的字母拖入右侧的方框内

图2.拖动一个带选项到方框内

图3.第一个选项拖动完成

图4.最多可以选择4个，且不可以有重复选项

图5.也可以随时点击下方链接，查看当前选择情况
一下是页面代码：
-----------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var a_this;//这个用来记录选择项的显示值
var a_type = new Array();//这个，用来记录选项的type值，可以表示将向服务器提交的项目
var is_choose;//记录当前的选项是否已被选择
var is_into;//检查是否已被拖动到选项区
var max_choose = 4;//最多的可选数量
var view_count = $('#changed');
var count = 0;
$(document).ready(function(){
   a_changed();
   $(".abc").draggable({
    helper: 'clone',
    start : function(e, ui){//这里可以使start，也可以是drag，表示拖动开始或拖动过程中将执行的逻辑，但不能使用stop，因为如果使用stop，其中的逻辑会在droppable（）的drop后执行，i记录的就是上一次拖动的东西
      is_choose = 0;
      is_into = 0;
      a_this = this;
      for(var j=0; j<a_type.length; j++){
         if(a_type[j]==this){
          is_choose = 1;//检查当前选项是否已选择
         }
      }
     },
    stop : function(e, ui){//这里一定要用stop，stop是一个时刻，而drag是一个时间段，如果用drag会造成多次赋值，用start的话，如果没有拖动到预选区，会将不想要的结果传递到预选辅助内
      is_into ++;
      canChoose();
     }
   });
    $(".drop").droppable({
     accept: ".abc",
     activeClass: 'droppable-active',
     hoverClass: 'droppable-hover',
     drop: function() {
       is_into++;
     }
    });
});
function canChoose(){
   count = a_type.length + 1;
if(is_choose == 0 && is_into == 2 && count <= max_choose){
    a_changed();
    $(".drop").append("<br>" + a_this.text);
    a_type[a_type.length] = a_this;
}
}
function a_changed(){//提示信息的显示
if(count == 0){
    $("#changed").text("(请将您的选项拖到这里)");
}else if(count < max_choose){
    $("#changed").text("(已选"+count+"项，还可选"+(max_choose-count)+"项)");
}else{
    $("#changed").text("(选项已满！)");
}
}
function ssss(){
var sf="已选数量：" + a_type.length;
if(a_type.length > 0){
   sf+="，包括："
   for(var j=0; j<a_type.length; j++){
      sf+=a_type[j].type + ";";
   }
   }
   alert(sf);
}
</script>
<style>
.drop {
background-color: #e9b96e;
border: 3px double #c17d11;
width: 180px;
height: 130px;
margin: 10px;
position: absolute;
top: 5px;
right: 5px;
opacity: 0.7;
overflow:auto;
}
.droppable-active {
opacity: 1.0;
}
.droppable-hover {
outline: 1px dotted black;
}
.abc{
color : green;
cursor : move;
}
.bcd{
cursor : help;
}
</style>
</head>
<body>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.droppable.js"></script>
<a class="abc" type="jkl1">AA</a><br>
<a class="abc" type="jkl2">BB</a><br>
<a class="abc" type="jkl3">CC</a><br>
<a class="abc" type="jkl4">DD</a><br>
<a class="abc" type="jkl5">EE</a><br>
<a class="abc" type="jkl6">FF</a><br>
<a class="abc" type="jkl7">GG</a><br>
<a class="abc" type="jkl8">HH</a><br>
<a class="abc" type="jkl9">II</a><br>
<a class="abc" type="jkl10">JJ</a><br>
<a class="bcd" onclick="ssss()"><u>查看当前选项</u></a>
<div class="drop">您当前的选择：<br><a id="changed" type="dfhjkk"></a></div>
</body>
</html>
参考资料：http://docs.jquery.com/UI/Droppables
转载请注明出处：http://hi.baidu.com/%CE%DE%5F%CB%F9
------------------------------------------------------------------
4000
------------------------------

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： class function html jquery ui 浏览器

相关文章推荐

新的分享

章节导航