jQuery仿Windows桌面图标管理的一点探索

Windwos的桌面图标管理方式,即

　　左键双击打开/左键单击选中拖放排序/右键单击展开菜单


因为广泛被用户接受,学习成本低.但是在Web前端中,右键天然被浏览器菜单所占据,左键双击因用户对浏览器超链接的学习而很少在网页中使用,因此,提出了如下的方案:

　　左键单击打开/左键单击选中拖放排序/鼠标悬浮展开菜单


鼠标的悬浮展开菜单有不少优秀的插件,中心的问题在于,如何判断用户单击的意图,避免左键拖放时意外激活打开功能.

解决方案如下:

XHTML:

<ul id="sortable1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

jQuery:

View Code

$(function(){

　function sortable_item_click(){//定义点击后执行的函数
$( "#sortable1 li" ).click(function(){
put_your_own_function_here()//这里是你自己的函数
})
　 }

sortable_item_click()//初始化绑定点击动作

$( "#sortable1" ).sortable({ //使用soratble方法使列表可以拖放排序

start:function(event){//拖放开始
if(event.which == 1){//如果是左键
$( "#sortable1 li" ).unbind("click")//则取消点击动作
}
},

stop:function(event){//拖放结束
if(event.which == 1){//如果是左键
$("#sortable1").animate({" ":" "},1,function(){//松开左键之后1毫秒后重新绑定
sortable_item_click()
})
}
}
})
})