jquery draggable plugin
臧增
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$("#test").draggable({hander:$("#p")});
});
~function($){
$.fn.draggable=function(cfg){
cfg=cfg?cfg:{};
this.each(function(){
var target=$(this),hander, proxy,x=0,y=0,flag=false;
hander=cfg.hander?cfg.hander:target;
hander.mousedown(function(){
x=event.clientX-target.attr("offSetLeft");
y=event.clientY-target.attr("offSetTop");
proxy = $("<div style='position:absolute;border:2px dashed #ccc;'></div>") ;
proxy.insertAfter(target);
proxy.css({"width":target.css("width"),"height":target.css("height"),"left":target.attr("offSetLeft")+5,"top":target.attr("offSetTop")+5,"z-index":9999});
proxy.mousemove(mouseMove).mouseup(mouseUp);
$(document).mouseup(mouseUp).mousemove(mouseMove);
flag=true;
});
function mouseMove(){
if(flag)
{
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
proxy.css("left" ,event.clientX-x+5);
proxy.css("top" ,event.clientY-y+5);
}
}
function mouseUp(){
var x=proxy.attr("offSetLeft")-5;
var y=proxy.attr("offSetTop")-5;
if(x<0)
{
x=0;
}
if(y<0)
{
y=0;
}
if(y+proxy.height()>$(window).height())
{
y=$(window).height()-proxy.height()-3;
}
if(x+proxy.width()>$(window).width())
{
x=$(window).width()-proxy.width()-8;
}
target.animate({left:x,top:y},"slow");
proxy.unbind("mousemove").unbind("mouseup");
$(document).unbind("mousemove").unbind("mouseup");
proxy.remove();
flag=false;
}
});
};
}(jQuery);
</SCRIPT>
</HEAD>
<BODY>
<div id="display"
style="position: absolute; width: 200px; height: 200px; border: 1px solid #f00; top: 120px; left: 20px;"> dddd
</div>
<div id="test"
style="position: absolute; width: 200px; height: 200px; border: 1px solid #f0f; top: 200px; left: 200px;">
<div id="p" style=" width: 200px; height: 20px; border: 1px solid #f0f; "> fffffffffffffddd</div>
</div>
<button id="btn" style="position: absolute;">dfdfdf</button>
</BODY>
</HTML>
类似资料：