使用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();
}