jquery插件问题

Question

自己学着写jquery插件，但在写一个插件时出现了问题。请各位帮忙
功能：可拖动的DIV
下面是代码。handle为可以按住鼠标move的DIV
(function($){ $.fn.Drags=function(opts){ var defaults={ 
zIndex: 20, 
opacity:1, 
handle:null, 
}; var offx=6,offy=6; 
var moveable=false; 
var opts=$.extend(defaults,opts); //开始拖动 
var startDrag=function(e,$obj){ 
//锁定标题栏; 
$obj.setCapture(); 
e = e ? e : window.event; 
//定义对象 
var win=$obj.parentNode; 
var sha=win.nextSibling; //记录鼠标的位置 
x0=e.clientX; 
y0=e.clientY; 
x1=parseInt(win.style.left); 
y1=parseInt(win.style.top); //改变风格 
sha.style.filters.alpha.opacity=opts.opacity; 
sha.style.left=x1+offx; 
sha.style.top=y1+offy; 
moveable=true; 
} //拖动 
var Drag=function(e,$obj){ 
if(moveable) 
{ 
e = e ? e : window.event; 
var win=$obj.parentNode; 
var sha=win.nextSibling; 
win.style.left = x1 + e.clientX - x0; 
win.style.top = y1 + e.clientY - y0; 
sha.style.left = parseInt(win.style.left) + offx; 
sha.style.top = parseInt(win.style.top) + offy; 
} 
} //停止拖动 
function stopDrag($obj) 
{ 
if(moveable) 
{ 
var win=$obj.parentNode; 
var win = $obj.parentNode; 
var sha = win.nextSibling; 
var msg = $obj.nextSibling; 
sha.style.left = $obj.parentNode.style.left; 
sha.style.top = $obj.parentNode.style.top; 
$obj.releaseCapture(); 
moveable = false; 
} 
} //获取焦点 
function getFocus($obj) 
{ 
if($obj.style.zIndex!=zIndex) 
{ 
zIndex=zIndex+2; 
var idx=zIndex; 
$obj.style.zIndex=idx; 
$obj.nextSibling.style.zIndex=idx-1; 
} 
} $obj.bind('mousedown',function(e){ $obj=$(e.target).parent(); 
getFocus($obj); 
e = e ? e : window.event; 
$(opts.handle).bind('mousedown',function(e,$obj){ 
startDrag(e,$obj); 
}) 
$(opts.handle).bind('mouseup',function($obj){ 
stopDrag($obj); 
}) 
$(opts.handle).bind('onmousemove',function(e,$obj){ 
Drag(e,$obj); 
}) 
}) } })(jQuery);

Answer 1

写了一个，供参考
<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript">
(function($) {
  $.extend({
    Draging:{//global variable
        top:0,
        left:0,
        x:0,
        y:0,
        isDrag:false
    }
  });
  $.fn.extend({
      Draging:function(settings){
        var obj = $(this);
        if(settings!=null){
            for(var key in settings){
                obj.css(key,settings[key]);
            }
        }
        obj.css("position","absolute");
        obj.css("cursor","move");
        
        obj.mousedown(function(e){
            $(this)[0].setCapture;
            $.Draging.top = $(this).offset().top; 
            $.Draging.left =$(this).offset().left; 
            $.Draging.x = e.clientX; 
            $.Draging.y = e.clientY; 
            $.Draging.isDrag = true;        });
        obj.mousemove(function(e){
            var e = window.event || e;
            if ($.Draging.isDrag) { 
                $(this).css("top",($.Draging.top + parseInt(e.clientY) - $.Draging.y) + "px"); 
                $(this).css("left",($.Draging.left + parseInt(e.clientX) - $.Draging.x) + "px"); 
            } 
        });
        obj.mouseup(function(e){
            $.Draging.isDrag = false; 
            $(this)[0].releaseCapture;
        });
     }
  });
  
  
})(jQuery);$(document).ready(function(){
    $("#b").Draging({
        border:"solid 1px #000",
        top:"300px",
        left:"300px"
    });
});
</script>
<div id="b">aaaaaaa</div>

Answer 2

$.fn.drag = function(elToDrag, fnChk) {
    return this.each(function() {
        elToDrag = elToDrag || this;
        var target = $(this);
        target.mousedown(function(e) {
            if (!fnChk(e)) return;
            var dx = e.clientX - elToDrag.offsetLeft,
            dy = e.clientY - elToDrag.offsetTop;
            if ($.browser.msie) {
                elToDrag.setCapture();
                elToDrag.attachEvent('onlosecapture', upHandler);
            }
            function moveHandler(e) {
                function max(a, b) {
                    return Math.max(a, b);
                }
                target.css("cursor", 'move');
                $(elToDrag).css({
                    'left': max(e.clientX - dx, 0) + "px",
                    'top': max(e.clientY - dy, 0) + "px"
                });
                return false;
            }
            function upHandler(e) {
                $(this).unbind("mousemove").unbind("mouseup");
                if ($.browser.msie) {
                    elToDrag.detachEvent('onlosecapture', upHandler);
                    elToDrag.releaseCapture();
                }
                target.css("cursor", 'default');
                return false;
            }
            $($.browser.msie ? elToDrag: document).mousemove(moveHandler).mouseup(upHandler);
        })
    });
};

Answer 3

自己换了种方式写，最后我写的。谢谢各位
// JavaScript Document
// arain
// 2009 03 03
// div drag
var listZIndex = 100; 
(function($){
$.fn.Drags= function(options){        var lastMouseX = 0;
        var lastMouseY = 0;        var defaults = {
            posx : 0,
            posy : 0,
            handle: this,
    draggable: true
        };
        
        var options = $.extend(defaults, options);
        
    var setFocus = function($obj){
        $obj.css("z-index",listZIndex++);
    };
    
    var move = function($obj, x, y){
        $obj.attr("lastX",x)
        .attr("lastY",y)
        .css("left", x)
            .css("top", y);
    };     var dragging = function(e, $obj){
        if(options.draggable){
    e = e ? e : window.event;
        var newx = parseInt($obj.css("left")) + (e.clientX - lastMouseX);
            var newy = parseInt($obj.css("top")) + (e.clientY - lastMouseY);
        lastMouseX = e.clientX;
        lastMouseY = e.clientY;
       
        move($obj,newx,newy);
    }
    };
    
    $(options.handle).bind('mousedown', function(e){
        $obj = $(e.target).parent();
    setFocus($obj);
    
        if($obj.attr("state") == "normal"){
            e = e ? e : window.event;
        lastMouseX = e.clientX;
        lastMouseY = e.clientY;
         
        $(document).bind('mousemove', function(e){
        dragging(e, $obj);
        });
         
    
        $(document).bind('mouseup', function(e){
    $(document).unbind('mousemove');
    $(document).unbind('mouseup');
        });
    
        }
        });
    
    move($(this),options.posx,options.posy);
    $(this).attr("state","normal");

}})(jQuery);

Answer 4

昨天我在jquery官网找到LZ的插件, 早已经不是这个版本, 但在ie6下测试有bug, 准备改写一下, 但看不明白代码, 上网找资料, 想不到在csdn遇见此帖, 世界太奇妙了