jquery实现拖拽效果

因为要拖相框，找了很久因为找不到错误，只能看源代码

如何达到拖动效果？

首先，分析了拖曳效应的原理：1 .当鼠标在被拖动的对象上按下时(这将触发onmousedown事件，并且鼠标位于对象上方)；2.开始移动鼠标(这将触发onmousemove事件)；3.移动时显示对象的顶部和左侧值；4.释放鼠标停止拖动(这将触发onmouseup事件)；注意：拖动的对象必须是定位对象(即positioning设置为绝对或相对)。

也就是说，拖动事件=onmousedown事件onmousemove事件

整个过程就是处理这三个事件来模拟拖拽事件。现在看看我实现的源代码：

Html代码：

div class=' drag ' p class=' title ' title(点击标题拖动)/p/div class=' drag 1 ' p class=' title ' title/p点击我移动/divjquery插件代码：

(函数($) {$。fn。drag=function(options){//默认配置vardefaults={handler: false，opa city 3600.5 }；//覆盖默认配置varopts=$。扩展(默认值、选项)；This.each(function(){ //初始标记变量var为move=false。//如果没有设置值，那么handler默认为移动对象本身，否则就是设置的handler值handler=opts.handler？$(这个)。查找(opts。handler) : $ (this)，_ this=$ (this)，//移动的对象dx，dy；$(文档)//移动鼠标改变对象位置。mousemove(函数(事件){//console . log(is move)；If(isMove){ //获取移动varex=事件后鼠标的位置。pagex，ey=事件。佩吉；//更新对象坐标_ this.css ({'left' :ex-dx，' top ' : ey-dy })；} })//松开鼠标后，停止拖动。mouse up(function(){ is move=false；_this.fadeTo('fast '，1)；//console . log(IsMove)；});Handler //按下鼠标时，将标记变量isMouseDown设置为true。mouse down(function(event){//判断最后触发事件的对象是否为handlerif ($ (event。目标)。is(handler)){ is move=true；$(这个)。css('光标'，'移动')；//console . log(IsMove)；_this.fadeTo('fast '，opts . opacity)；//鼠标相对于移动对象的坐标dx=event . pagex-par sent(_ this . CSS(' left '))；dy=event . pagey-parsent(_ this . CSS(' top '))；} });});};})(jQuery)；调用方法：

$(function(){ //拖动title $(')。拖动')。拖动({handler: $(')。title ')，//操作拖动对象，必须是移动对象opacity:0.7的子元素//拖动时设置透明度})；//拖动主题对象$(. Drag 1 ')。拖动({ opa city 33600.7 })；});以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。