jquery2014-09-24 20:15:54 4701
Jq方法拓展,让元素可以随意拖动。使用时只需要执行元素的Drag方法即可,禁止拖动执行DisDrag方法。例如:
$("#testDiv").Drag();
$("#testDiv").DisDrag();Jq代码:
$.fn.extend({
Drag:function(){
alert("允许拖放");
$(this).attr("isDrag",1);
$(this).mousedown(function(e){
if($(this).attr("isDrag")==0)return;
$(this).attr("drag",1);
$(this).css("position","absolute");
$(this).css("cursor","default");
var currentTarget=$(this);
var currentDisX=e.pageX-$(this).offset().left;
var currentDisY=e.pageY-$(this).offset().top;
$(document).mousemove(function(event){
if($(currentTarget).attr("drag")==0)return;
var currentX=event.clientX;
var currentY=event.clientY;
var cursorX=event.pageX-currentDisX;
var cursorY=event.pageY-currentDisY;
$(currentTarget).css("top",cursorY "px").css("left",cursorX "px");
});
$(document).mouseup(function(){$(currentTarget).attr("drag",0);});
});
},
DisDrag:function(){
alert("禁止拖放");
$(this).attr("isDrag",0);
$(this).attr("drag",0);
}
});
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Jq拖放元素,Jq拓展
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/NDI=.html
下一篇 PHP获取URL和参数