使用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>
处理的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(); ???????}JS =>处理单击事件与拖动事件并存
原文地址：http://www.cnblogs.com/danlis/p/7878329.html