JS =>处理单击事件与拖动事件并存

使用click事件，很难确定在拖动开始和结束的时候触发，所以使用了onmouseup（释放鼠标的时候），释放鼠标的时候，即在拖动还未结束，但是准备处理的阶段，此时mouseButtonFlag按照逻辑来说应该是true，即不会触发绑定的事件。

1.将click转为使用onmouseup事件

2.添加mouseButtonFlag对象，判断是否拖拽情况，用以处理是否触发鼠标释放（点击）事件

（这个是篇sortable的参数说明的文章，作者xpsharp，http://blog.csdn.net/xpsharp/article/details/6906228）

需要处理的是，拖动图片的时候，不能触发点击事件

 1 <ul class="alist ui-sortable" id="acAlbums">
 2                                                             <!--加载相册-->
 3
 4
 5                                                                 <li>
 6                                                                     <div class="closed"></div>
 7                                                                     <div class="media1">
 8                                                                         <a href="#_">
 9                                                                             <img src="http://file.ttyouni.com/image/cf195039ccf61be50eca6fad8beddd837a67e1876165d68ef16fb51385e0341bf7893184ab4034465ca6bbbe041be38bddb9d98c3453acc7799dcc3248aa0a0c0f208bde2f43c2284e2b28331912539c734556076d66b0bf" alt="" url="" onmouseup="openImageSetDialog(this)" width="50"></a>
10                                                                     </div>
11                                                                 </li><li style="position: relative; left: 0px; top: 0px;" class="">
12                                                                     <div class="closed"></div>
13                                                                     <div class="media1">
14                                                                         <a href="#_">
15                                                                             <img src="http://file.ttyouni.com/image/cf195039ccf61be50eca6fad8beddd837a67e1876165d68ef16fb51385e0341bf7893184ab4034465ca6bbbe041be38bddb9d98c3453acc7799dcc3248aa0a0c9474269a0c6f49fc58f17296ca8f10dd734556076d66b0bf" alt="" url="" onmouseup="openImageSetDialog(this)" width="50"></a>
16                                                                     </div>
17                                                                 </li><li style="position: relative; left: 0px; top: 0px;" class="">
18                                                                     <div class="closed"></div>
19                                                                     <div class="media1">
20                                                                         <a href="#_">
21                                                                             <img src="http://file.ttyouni.com/image/cf195039ccf61be50eca6fad8beddd837a67e1876165d68ef16fb51385e0341bf7893184ab4034465ca6bbbe041be38bddb9d98c3453acc7799dcc3248aa0a0c0f208bde2f43c2284e2b28331912539c734556076d66b0bf" alt="" url="" onmouseup="openImageSetDialog(this)" width="50"></a>
22                                                                     </div>
23                                                                 </li><li style="position: relative; left: 0px; top: 0px;" class="">
24                                                                     <div class="closed"></div>
25                                                                     <div class="media1">
26                                                                         <a href="#_">
27                                                                             <img src="http://file.ttyouni.com/image/cf195039ccf61be50eca6fad8beddd837a67e1876165d68ef16fb51385e0341bf7893184ab4034465ca6bbbe041be38bddb9d98c3453acc7799dcc3248aa0a0c0f208bde2f43c2284e2b28331912539c734556076d66b0bf" alt="" url="" onmouseup="openImageSetDialog(this)" width="50"></a>
28                                                                     </div>
29                                                                 </li>
30                                                                 <li style="position: relative; left: 0px; top: 0px;" class="">
31                                                                     <div class="closed"></div>
32                                                                     <div class="media1">
33                                                                         <a href="#_">
34                                                                             <img src="/Content/Images/Scene/Gather204/banner.jpg" alt="" url="http://www.ttyouni.com/" onmouseup="openImageSetDialog(this)" width="50"></a>
35                                                                     </div>
36                                                                 </li>
37
38                                                                                                                         <li class="add">
39                                                                 <a href="javascript:;">
40                                                                     <img src="/Content/Images/Scene/Vote004/jia.jpg" onclick="openImageSetDialog(this,1)" width="50">
41                                                                 </a>
42                                                             </li>
43                                                         </ul>

html

处理的JS

var mouseButtonFlag = false;//控制是否触发点击事件
        //拖动
        $(‘#acAlbums‘).sortable({
            items: "li:not(.add)",
            start: function (event, ui) {
                mouseButtonFlag = true;
            },
            stop: function (event, ui) {
                mouseButtonFlag = false;
            }
        });

        //打开轮播图片设置的弹窗
        function openImageSetDialog(obj,v) {
            if (mouseButtonFlag) {
                return;
            }
            if (v!=undefined) {//添加图片对象
                $("#show_image_1").attr("src", "/Content/Images/Scene/Vote004/jia.jpg");
                $("#image_url_txt").val("http://ttyouni.com/show/index")
            }
            else {
                $("#show_image_1").attr("src", $(obj).attr("src"));
                $("#image_url_txt").val($(obj).attr("url"))
            }
            $("#image_index_txt").val($(obj).parents("#acAlbums li").index())
            $("#choose_activebox1").show();
        }