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

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

 

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

因为广泛被用户接受,学习成本低.

但是在Web前端中,右键天然被浏览器菜单所占据,左键双击因用户对浏览器超链接的学习而很少在网页中使用,因此,

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

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

 

Html 

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

 

jQuery 

$(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() 
                 }) 
             } 
         }
    })
})