因為想實現相框的拖到，找了半天的原因愣是沒有找到錯誤，所以，只能翻看源碼了
如何實現拖動效果？
首先分析下拖動效果原理：
1.當鼠標在被拖動對象上按下鼠標（觸發onmousedown事件，且鼠標在對象上方）
2.開始移動鼠標（觸發onmousemove事件）
3.移動時更顯對象的top和left值
4.鼠標放開停止拖動(觸發onmouseup事件)
注意：拖動的對象必須是定位對象(即設置了position:absolute或 relative)。
也就是說拖動事件=onmousedown事件+onmousemove事件
整個過程就是處理這三個事件來模擬drag事件
現在看看我實現的源代碼：
html代碼：
<div class="drag"> <p class="title">標題(點擊標題拖動)</p></div><div class="drag1"> <p class="title">標題</p> 點擊我移動</div>
jquery插件代碼：
(function($){ $.fn.drag=function(options){ //默認配置 var defaults = { handler:false, opacity:0.5 }; // 覆蓋默認配置 var opts = $.extend(defaults, options); this.each(function(){ //初始標記變量 var isMove=false, //handler如果沒有設置任何值，則默認為移動對象本身，否則為所設置的handler值 handler=opts.handler?$(this).find(opts.handler):$(this), _this=$(this), //移動的對象 dx,dy; $(document) //移動鼠標，改變對象位置 .mousemove(function(event){ // console.log(isMove); if(isMove){ //獲得鼠標移動后位置 var eX=event.pageX,eY=event.pageY; //更新對象坐標 _this.css({'left':eX-dx,'top':eY-dy}); } }) //當放開鼠標，停止拖動 .mouseup(function(){ isMove=false; _this.fadeTo('fast', 1); //console.log(isMove); }); handler //當按下鼠標，設置標記變量isMouseDown為true .mousedown(function(event){ //判斷最后觸發事件的對象是否是handler if($(event.target).is(handler)){ isMove=true; $(this).css('cursor','move'); //console.log(isMove); _this.fadeTo('fast', opts.opacity); //鼠標相對于移動對象的坐標 dx=event.pageX-parseInt(_this.css("left")); dy=event.pageY-parseInt(_this.css("top")); } }); }); }; })(jQuery); 調用方法：
$(function(){ //拖動標題 $(".drag").drag({handler:$('.title'),//操作拖動的對象，此對象必須是移動對象的子元素opacity:0.7 //設置拖動時透明度}); //拖動主體對象 $(".drag1").drag({ opacity:0.7 }); });以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
