jquery鼠标双击事件拖拽图片

jquery鼠标双击事件拖拽图片jquery鼠标双击事件拖拽图片是一款jquery图片拖拽实例，支持双击事件和拖拽图片。jquery鼠标双击双击事件图片拖拽 所属专题：图片代码

<script type="text/javascript">
$(function () {


ImgListMouseDownEvent();//注册鼠标在图片上的事件(按下事件和双击事件)
SortListMouseDownEvent();//注册鼠标在排序后图片上的事件(按下事件和双击事件)
WindowMouseMoveAndUp();//注册windows事件（鼠标移动和松开事件）
});
//禁止拖动
document.ondragstart = function () { return false };
//禁用文本选择功能
var omitformtags = ["input", "textarea", "select"]
omitformtags = omitformtags.join("|")
function disableselect(e) {
if (omitformtags.indexOf(e.target.tagName.toLowerCase()) == -1)
return false
}
function reEnable() {
return true
}
if (typeof document.onselectstart != "undefined")
document.onselectstart = new Function("return false")
else {
document.onmousedown = disableselect
document.onmouseup = reEnable
}
//禁用右键
$(document).ready(function () {
$(document).bind("contextmenu", function (e) {
//return false;
});
});




//注册鼠标在图片上的事件(按下事件和双击事件)
function ImgListMouseDownEvent() {
$(".imgList > li").unbind("mousedown").unbind("dblclick");//为图片绑定(注册)鼠标按下事件和鼠标双击事件
$(".imgList > li[allow]").mousedown(function (event) {
$(document.body).data("_isimgdown_", true); //标示是否为鼠标在图片上的按下事件
$(document.body).data("_eventx_", event.pageX); //鼠标在图片上按下事件时鼠标的x坐标值
$(document.body).data("_eventy_", event.pageY); //鼠标在图片上按下事件时鼠标的y坐标值
$(document.body).data("_li_", $(this)); //鼠标在图片上按下事件时当前的li元素


$(document.body).data("_imgtop_", (event.pageY - $(this).offset().top) * 0.26);
$(document.body).data("_imgleft_", (event.pageX - $(this).offset().left) * 0.38);
//var _li_ = $(document.body).data("_li_");
//alert("x:" + $(document.body).data("_eventx_") + " y:" + $(document.body).data("_eventy_") + " li-img:" + $("img", _li_).attr("src") + " li-div:" + $("div", _li_).html());
}).dblclick(function (event) {
$(".imgList > li").unbind("mousedown").unbind("dblclick");//为图片绑定(注册)鼠标按下事件和鼠标双击事件
$(".sortList > li").unbind("mousedown").unbind("dblclick");//为已选图片绑定(注册)鼠标按下事件和鼠标双击事件


var _this_ = $(this);//鼠标在图片上双击事件时当前的li元素
var _img_ = $("img", _this_);//鼠标在图片上双击事件时当前的图片元素
var _div_ = $("div", _this_);//鼠标在图片上双击事件时当前的div元素
//alert(_div_.html()+" "+_img_.attr("src") );


var targetLi; //定义目标
//alert(targetLi);
//循环目标的li元素
$(".sortList > li").each(function (i, e) {
if ($("img", $(this)).length == 0 && (!$(this).attr("allow") || $(this).attr("allow") == false)) {
targetLi = $(this); //目标为符合条件的当前li元素
return false;
}
});
//alert($("div",targetLi).attr("class"));
if (targetLi) { //目标li存在
var targetLeft = targetLi.offset().left;
var targetTop = targetLi.offset().top;


_this_.removeAttr("allow").addClass("image_shadow"); //排序前的当前li元素移除allow属性 添加样式：image_shadow
targetLi.attr("allow", true);//排序后的目标元素添加属性allow为true


var _dropDivID_ = "_divDrop_" + _this_.attr("id").replace("_s_", ""); //动画层id


$("<div class='DropDiv' style='display:none;' id='" + _dropDivID_ + "'></div>").appendTo($(document.body)); //创建动画层
$("#" + _dropDivID_).html(_div_.html())
  .css({ top: event.pageY - (event.pageY - $(this).offset().top) * 0.26, left: event.pageX - (event.pageX - $(this).offset().left) * 0.38 })
  .height(50)
  .width(86)
  .fadeIn(100, function () {


  $(this).animate({ top: targetTop - 2, left: targetLeft + 2 }, 500, "linear", function () {


  $(this).fadeOut(100, function () {


  $(this).remove();


  //生成图片和文字 
  targetLi.empty()
  .html("<div style='display:none;'>" + _div_.html() + "</div>" + "<img width=86 height=50 style='display:none;' src=" + _img_.attr("src") + " />")
  .removeAttr("id")
  .attr("id", "_s_" + _this_.attr("id").replace("_s_", ""));


  //图片效果
  $("img", targetLi).show();


  });
  });
  });
//alert("left:" + targetLeft + " top:" + targetTop);
ImgListMouseDownEvent();//重新注册鼠标在图片上的事件(按下事件和双击事件)
SortListMouseDownEvent();//重新注册鼠标在排序后图片上的事件(按下事件和双击事件)
}


})
}


//注册鼠标在排序后图片上的事件(按下事件和双击事件)
function SortListMouseDownEvent() {
$(".sortList li").unbind("mousedown").unbind("dblclick").unbind("mouseover").unbind("mouseout");
$(".sortList li[allow=true]").mousedown(function (event) {


$(document.body).data("_issortdown_", true);
$(document.body).data("_eventx_", event.pageX);
$(document.body).data("_eventy_", event.pageY);
$(document.body).data("_li_", $(this));


$(document.body).data("_imgtop_", (event.pageY - $(this).offset().top));
$(document.body).data("_imgleft_", (event.pageX - $(this).offset().left));


}).dblclick(function (event) {
//debugger;
$(".imgList > li").unbind("mousedown").unbind("dblclick");
$(".sortList li").unbind("mousedown").unbind("dblclick");


var _this_ = $(this);//鼠标在排序后图片上双击事件时当前的li元素
var _img_ = $("img", _this_);//鼠标在排序后图片上双击事件时当前的图片元素
var _div_ = $("div", _this_);//鼠标在排序后图片上双击事件时当前的div元素


var targetLi = $("#" + _this_.attr("id").replace("_s_", ""));//得到目标元素（为鼠标在排序前图片上双击事件时当初的li元素）


var _dropDivID_ = "_divDrop_" + _this_.attr("id").replace("_s_", ""); //动画层id


$("<div class='DropDiv' style='display:none;' id='" + _dropDivID_ + "'></div>").appendTo($(document.body));//创建动画层


targetLi.attr("allow", true);//排序前的原元素添加属性allow为true
_this_.removeAttr("allow");//排序后的当前li元素移除allow属性 


$("#" + _dropDivID_).html(_div_.html())
.css({ top: _this_.offset().top - 2, left: _this_.offset().left + 2 })
.height(50)
.width(86)
.fadeIn(100, function () {
$(this).animate({ top: targetLi.offset().top + (targetLi.height() * 0.5) / 2, left: targetLi.offset().left + (targetLi.width() * 0.5) / 2 }, 500, "linear", function () {


$(this).remove();


_this_.empty().removeAttr("id");


targetLi.removeClass("image_shadow");


addNoImgLiCss(); //添加无图片样式 addNoImgLiCss


});


});


ImgListMouseDownEvent();//重新注册鼠标在图片上的事件(按下事件和双击事件)
SortListMouseDownEvent();//重新注册鼠标在排序后图片上的事件(按下事件和双击事件)


}).mouseover(function () {


var _this_ = $(this);


$("img", _this_).hide();
$("div", _this_).show().addClass("selli");


}).mouseout(function () {


var _this_ = $(this);


$("div", _this_).hide().removeClass("selli");
$("img", _this_).show();




});
}


//#region 添加无图片样式 addNoImgLiCss
function addNoImgLiCss() {


var index = 1;
$('li', $(".sortList")).each(function () {




if ($("img", this).length == 0) {
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
$(this).html("<span>" + index + "</span>");
}
else {
$(this).html("<div class='sortListBg Bg" + index + "'></div>");
}
}
index++;
});


}
//#endregion


//#region 获取排序后li的位置数组 
function getSortPositionArrayList() {
var arraylist = new Array();
$("li", $(".sortList")).each(function (i) {


var array = new Array();
array[0] = $(this).offset().left;
array[1] = $(this).offset().left + $(this).width();
array[2] = $(this).offset().top;
array[3] = $(this).offset().top + $(this).height();
arraylist[i] = array;
});
return arraylist;
}
//#endregion


//#region 获取拖动位置 getPosition
function getPosition(pageX, pageY) {
var arraylist = getSortPositionArrayList();//获取排序后li的位置数组
for (var i = 0; i < arraylist.length; i++) { //循环排序后li的位置数组
if (pageX >= arraylist[i][0] && pageX <= arraylist[i][1] && pageY >= arraylist[i][2] && pageY <= arraylist[i][3]) {
return i; //如果鼠标的坐标位置处于排序后li的位置数组之间则返回排序后当前的li的索引
}
}
return -1;
}
//#endregion


//#region 注册windows事件（鼠标移动和松开事件）
function WindowMouseMoveAndUp() {
$(document).mousemove(function (event) {
ImgDragEvent(event);//鼠标在排序前图片上按下后的拖拽事件
SortDragEvent(event);//鼠标在排序后图片上按下后的拖拽事件
}).mouseup(function (event) {
var position = getPosition(event.pageX, event.pageY);
if ($(document.body).data("_isimgdown_")) { //鼠标是在排序前图片上按下时
ImgMouseUpEvent(position);//鼠标在图片上的松开事件
}
if ($(document.body).data("_issortdown_")) {//鼠标是在排序后图片上按下时
SortMouseUpEvent(position);//鼠标在排序后图片上的松开事件
}
});
}
//#endregion 


//#region 注册鼠标在排序前图片上按下后的拖拽事件
function ImgDragEvent(event) {
//排序前图片拖拽
if ($(document.body).data("_isimgdown_")) {
var _eventx_ = $(document.body).data("_eventx_");
var _eventy_ = $(document.body).data("_eventy_");
var _li_ = $(document.body).data("_li_");
//整体移动 >5 相素时移动
if (Math.abs(event.pageX - _eventx_) + Math.abs(event.pageY - _eventy_) >= 5) {
var _divHtml_ = $("div", _li_).html();
$("#DropDiv").html(_divHtml_)
.css({ top: event.pageY - $(document.body).data("_imgtop_"), left: event.pageX - $(document.body).data("_imgleft_") })
.height(50)
.width(86)
.show();
}
}
}
//#endregion


//#region 注册鼠标在排序后图片上按下后的拖拽事件
function SortDragEvent(event) {
//排序后图片拖拽
if ($(document.body).data("_issortdown_")) {
var _eventx_ = $(document.body).data("_eventx_");
var _eventy_ = $(document.body).data("_eventy_");
var _li_ = $(document.body).data("_li_");
//整体移动 >5 相素时移动
if (Math.abs(event.pageX - _eventx_) + Math.abs(event.pageY - _eventy_) >= 5) {
var imgsrc = $("img", _li_).length > 0 ? $("img", _li_).attr("src") : "/Aspx_Page/images/white.png";
var _divHtml_ = $("div", _li_).html()
$("#DropDiv").html(_divHtml_)
.css({ top: event.pageY - $(document.body).data("_imgtop_"), left: event.pageX - $(document.body).data("_imgleft_") })
.height(50)
.width(86)
.show();
}
}
}
//#endregion


//#region 注册图片mouseup事件 registerImgMouseUpEvent
function ImgMouseUpEvent(position) {


//当前拖拽的图片对象
var _li_ = $(document.body).data("_li_");


var _img_ = $("img", _li_);


var _divHtml_ = $("div", _li_);


//当前拖拽位置
if (position != -1) {


//拖在已存在图片上
if ($("img", $(".sortList > li:eq(" + position + ")")).length > 0) {
var existsid = $(".sortList > li:eq(" + position + ")").attr("id");
$("#" + existsid.replace("_s_", "")).attr("allow", true).removeClass("image_shadow");
/*
var nextLi;
$(".sortList > li:gt(" + position + ")").each(function () {
if (!$(this).attr("allow") || $(this).attr("allow") == false) {
nextLi = $(this);
return false;
}
});
var existsid = $(".sortList > li:eq(" + position + ")").attr("id");
if (nextLi != undefined) {


nextLi.html($("#_s_" + existsid.replace("_s_", "")).html())
.insertAfter($(".sortList > li:eq(" + position + ")"))
.attr("allow", true)
.removeClass("image_shadow")
.attr("id", "_s_" + existsid.replace("_s_", ""))
}
else {


$("#" + existsid.replace("_s_", "")).attr("allow", true).removeClass("image_shadow");
}
*/
}


//生成图片和文字
$("li:eq(" + position + ")", $(".sortList"))
.empty()
.html("<div style='display:none;'>" + _divHtml_.html() + "</div>" + "<img width=86 height=50 style='display:none;' src=" + _img_.attr("src") + " />")
.removeAttr("id")
.attr("id", "_s_" + _li_.attr("id").replace("_s_", ""))
.attr("allow", true);




//图片效果
$("img", $("#_s_" + _li_.attr("id").replace("_s_", ""))).show();


//移除可拖拽属性
_li_.removeAttr("allow").addClass("image_shadow");


//注册事件
ImgListMouseDownEvent();//注册鼠标在图片上的事件(按下事件和双击事件)
SortListMouseDownEvent();//注册鼠标在排序后图片上的事件(按下事件和双击事件)
}


//移除img的mousedown
$(document.body).removeData("_isimgdown_");


//隐藏拖拽层
$("#DropDiv").empty().hide();


}
//#endregion


//#region 注册ULmouseup事件 registerUlMouseUpEvent
function SortMouseUpEvent(position) {
//debugger;
//当前拖拽li对象
var _li_ = $(document.body).data("_li_");


//当前拖拽位置
if (position != -1) {
//debugger;
//拖在已存在图片上
if ($("img", $("ul.sortList > li:eq(" + position + ")")).length > 0) {
var existsid = $("ul.sortList > li:eq(" + position + ")").attr("id");
$("#" + existsid.replace("_s_", "")).attr("allow", true).removeClass("image_shadow");
}
//在新位置添加元素
$("ul.sortList > li:eq(" + position + ")")
.empty()
.attr("allow", true)
.attr("id", _li_.attr("id"))
.html(_li_.html());
//移除原位置元素
$("ul.sortList > li:eq(" + _li_.index() + ")")
.removeAttr("id")
.removeAttr("allow")
.html('<div class="sortListBg Bg"' + (_li_.index() + 1));


/*
//向后拖动
if (_li_.index() > position) {


$("img", _li_).hide();
$(_li_).insertBefore($(".sortList > li:eq(" + position + ")"));
//            $("img", _li_).fadeIn(100, function () {
//                $(this).fadeOut(100, function () {
//                    $(this).fadeIn(100);
//                });
//            })
}


//向前拖动
if (_li_.index() < position) {


$("img", _li_).hide();
$(_li_).insertAfter($(".sortList > li:eq(" + position + ")"));
//            $("img", _li_).fadeIn(100, function () {
//                $(this).fadeOut(100, function () {
//                    $(this).fadeIn(100);
//                });
//            })
}


*/
}
else {


$("#" + _li_.attr("id").replace("_s_", ""))
.attr("allow", true)
.removeClass("image_shadow");
_li_.empty().removeAttr("allow").removeAttr("id");


}


//注册事件
ImgListMouseDownEvent();//注册鼠标在图片上的事件(按下事件和双击事件)
SortListMouseDownEvent();//注册鼠标在排序后图片上的事件(按下事件和双击事件)




//添加无图片的li样式
addNoImgLiCss();


//移除ul的mousedown
$(document.body).removeData("_issortdown_");


//隐藏拖拽层
$("#DropDiv").empty().hide();


}
//#endregion
</script>