jquery2014-09-24 20:15:54 4304
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和参数