由于框架实现了拖动,找到了一半的
原因并没有
发现错误,所以,只看源代码。
如何实现拖动效果
首先分析了低阻力效应的原理。
1。当
鼠标按下鼠标拖动对象(触发onmousedown事件,和鼠标上面的对象)
2。开始移动鼠标(鼠标移动时触发的事件)
三.当移动时,更明确的对象的顶部和左边值。
4。鼠标拖动(触发onmouseup事件发布停止)
注意:拖动的对象必须是
本地化对象(即,
设置位置:绝对位置或相对位置)。
也就是说,拖动事件= onmousedown事件+移动鼠标事件
整个过程是
处理这三个事件来
模拟拖动事件。
现在看一下我实现的源代码。
HTML代码:
标题(单击标题拖动)
标题
点击我移动
jQuery
插件代码:
(
函数($){)
函数=(
选项){
默认配置 var默认值= {
汉德勒:假,
不透明度:0.5
};
默认配置/覆盖
VaR选择=美元。
扩展(默认值,选择);
this.each(函数(){()
/初始标记变量
无功ismove = false,
如果处理
程序没有设置任何值,则默认为移动对象本身,否则设置处理程序值集。
处理程序=选择。处理程序(这)美元。找到(选择。Handler):$(this),
_this = $(this), / /移动对象
DX;
$(
文件)
移动鼠标来改变对象的位置。
。MouseMove(
功能(事件){)
/ / console.log(ismove);
如果(ismove){
获取鼠标位置后
var前= event.pagex,EY = event.pagey;
更新对象坐标
_this.css({右:前DX,' ':EY dy });
}
})
当您释放鼠标拖动/停止时。
。松开鼠标(功能(){()
ismove = false;
_this.fadeto('fast ',1);
/ / console.log(ismove);
});
处理程序
/ /当你按下鼠标ismousedown真,设置标记变量
。MouseDown(功能(事件){)
如果对象是处理程序,则
执行最后的判决触发事件。
如果($(事件对象))是(处理程序)){
ismove =真;
$(这)。Css('cursor ','move);
/ / console.log(ismove);
_this.fadeto('fast ',选择。透明度);
移动对象的鼠标坐标
DX = event.pagex-parseint(_this.css(左));
DY = event.pagey-parseint(_this.css(顶));
}
});
});
};
}(jQuery);
调用
方法:
$(函数(){())
拖动标题
$()拖动。
汉德勒:$(title),对象
操作拖动,这个对象必须是移动对象元素。
不透明:当拖动透明度时设置为0.7
});
主题拖动
$(。drag1)。拖动({
不透明度:0.7
});
});
以上是本文的全部内容,希望能对您有所帮助,希望大家多多
支持。